Question

我有一些javascript，用两个单独的链接切换两个div，我想在所选链接旁边添加一个小图片，例如，如果你选择div 1来查看链接会有一个litle子弹在它旁边，如果你选择div 2，div 2就会有一颗子弹。继承人脚本可以任何人帮助请：）

<!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>

Answer 1

您可以通过各种方式执行此操作。我可以想到三个我的头脑，我相信还有更多。

背景图片和填充
内容：前
动态更改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出现之前用来做事的方式。 :)我不推荐它，但偶尔它是以可靠的跨浏览器方式完成任务的唯一方法（可能不是在这种情况下）。为此，请插入＆lt; span＆gt;每个链接之前的标记，具有可从链接ID计算的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>

Javascript目标链接状态

1 个答案: