0

我有一些 javascript 可以用两个单独的链接切换两个 div，我想在所选链接旁边添加一个小图像，例如，如果您选择要查看的 div 1，则链接旁边会有一个小项目符号如果您选择 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>
4

1 回答 1

0

您可以通过多种方式做到这一点。我能想到三个，我敢肯定还有更多。

  1. 背景图像和填充
  2. 内容：之前
  3. 动态改变 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 技巧。

方法 #3 涉及在链接之前插入和删除 HTML。这是可能的，但很笨重。这是我们在 CSS2 和 3 出现之前的做法。:) 我不会推荐它，但有时它是以可靠的跨浏览器方式完成任务的唯一方法（在这种情况下可能不是）。为此，请在每个链接之前插入一个 <span> 标记，其 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>
于 2013-02-13T12:58:41.073 回答