Javascript目標鏈接狀態

我已經得到了一點點的JavaScript，用兩個單獨的鏈接來切換兩個div，我想在選定的鏈接旁邊添加一個小圖片，比如說，如果選擇div 1來查看鏈接，在它旁邊有一個小號的子彈，如果你選擇div 2，div 2就會有一個子彈。下面的劇本任何人都可以幫助請:) :)Javascript目標鏈接狀態

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 



    <style type='text/css'> 


    </style> 


    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> 

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(function(){ 

    $('a[id^="link"]').click(function(){ 
     var vid_id = $(this).attr("id").replace("link", "#testVid"); 
     $('div[id^="testVid"]').hide(); 
     $(vid_id).show(); 
    }); 
    $('span[id^="close"]').click(function(){ 
     var vid_id = $(this).attr("id").replace("close", "#testVid"); 
     $(vid_id).hide(); 
    }); 
}); 

});//]]> 

</script> 


</head> 
<body> 
    <div> 
    <a href="#" id="link1">Click Link 1</a><br /> 
    <a href="#" id="link2">Click Link 2</a><br /> 

    <div id="testVid1" style="background:pink; height:300px">Test Vid Div 1<br /><br /><span id="close1">CLOSE 1</span></div> 
    <div id="testVid2" style="display:none;background:pink; height:300px">Test Vid Div 2<br /><br /><span id="close2">CLOSE 2</span></div> 

</div> 

</body> 


</html>

來源

2013-02-13 mrmason

你可以用不同的方式做到這一點。我可以從頭頂考慮三個，我相信還有更多。

背景圖像和填充
內容：
動態改變DOM之前（不推薦）

在＃1和＃2的想法是改變所選擇的CSS樣式元件。對於＃1，你會定義樣式是這樣的：

.selected { 
    background-image: url(myselectedimage.png); 
    background-repeat: no-repeat; 
    background-position: left center; 
    padding-left: 20px; /* or whatever the size of your image is */ 
}

＃2，您可以使用以下方法：

.selected:before { 
    content: "\u2219"; /* bullet */ 
}

然後，你可以做這樣的事情，除去.selected類從一切，並把它添加到選定的鏈接，點擊一個鏈接時：

$('a[id^="link"]').click(function(e){ 
    $('a[id^="link"]').removeClass('selected'); 
    $(e.currentTarget).addClass('selected'); 
    ... 
}); 

$('span[id^="close"]').click(function(){ 
    $('a[id^="link"]').removeClass('selected'); 
    ... 
});

優勢接近1號是幾乎所有現代瀏覽器都支持無故障。＃2的優勢在於它更加靈活 - 您可以添加文本，圖像，屬性以及各種各樣的東西，但要警告瀏覽器支持可能不一致。由於您已經在使用CSS3選擇器（^ =），因此您可能確定。有關更多信息，請參閱CSS Tricks。

方法＃3涉及插入和刪除鏈接之前的HTML。這是可能的，但笨重。這就是我們在CSS2和3出現之前用來做事情的方式。 :)我不會推薦它，但偶爾它是以可靠的跨瀏覽器方式完成工作的唯一方法（可能不是這種情況）。爲此，請在每個鏈接之前插入一個<範圍的>標籤，並使用可根據鏈接ID進行計算的標識（或者您可以使用CSS選擇器來查找同級）。然後使用jQuery的html的（）方法插入HTML進去，例如：

<span id="bullet-link1"></span><a href="#" id="link1">Click Link 1</a><br /> 
... 

<script lang="text/javascript"> 
$('a[id^="link"]').click(function(e) { 
    $('span[id^="bullet-"]').html(''); 
    $('#bullet-' + e.currentTarget.id).html('&#8226;'); 
    ... 
}); 
</script>

來源

2013-02-13 12:58:41

這就是偉大的三江源....你可以彈出它變成一個的jsfiddle任何機會，只是這樣我就可以充分了解它的過程。你的寶石:) – mrmason 2013-02-13 13:05:38

Javascript目標鏈接狀態

回答

相關問題