1

我想问一下，点击链接后，如何将每个链接的背景颜色（围绕它的矩形）更改为一种不同的颜色，而其他链接仍然保持原来的背景颜色。

每个链接对应于放置在同一个 html 文件中的一个 div（我没有在这里包含）。

关键是让观众知道他们在哪个链接。顺便说一句，如果可以的话，我正在寻找最快的代码 ^_^（纯css、javascript或jQuery）。感谢所有建议！

高亮仅适用于当前链接！（其他的将有正常的颜色）

<div id="Navigation">
<div id="nav_link">
  <ul id="MenuBar" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="javascript:showonlyone('Index_frame');" >Home</a>
      <ul>
        <li><a href="javascript:showonlyone('Specification_frame');" >Specification</a></li>
        <li><a href="javascript:showonlyone('Images_frame');" >Images</a></li>
        <li><a href="javascript:showonlyone('Video_frame');">Video</a></li>
        <li><a href="javascript:showonlyone('Contact_frame');">Contact</a></li>
       </ul>
    </li>
    <li><a href="javascript:showonlyone('Specification_frame');" >Specification</a></li>
    <li><a href="javascript:showonlyone('Images_frame');" >Images</a></li>
    <li><a href="javascript:showonlyone('Video_frame');">Video</a></li>
    <li><a href="javascript:showonlyone('Contact_frame');">Contact</a></li>
    </ul>
</div>
  <!--End of nav_link-->
</div>
<!-- End of Navigation-->

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(1000).fadeIn(500);
          }
          else {
               $(this).hide(1500).fadeOut(500);
          }
     });
}

已编辑

伙计们，即使我花了很多时间在这件事上，我仍然坚持这一点，我在页面中添加了一些与上面相同的 JavaScript 链接，认为这些新链接的功能就像前者。正在单击 ==> 突出显示仅出现在这些导航链接上。我试图像这样从jjurm修改函数

$(function(){
    $("#MenuBar a,#colOne a").bind("click", function(){
        var names=$(this).attr('name');
        $("#MenuBar a").removeClass("clicked");
        $("#MenuBar a[name='names']").addClass("clicked");

    });
});

它没有用，旧的也没有用

4

4 回答 4

4

在与您类似的问题中，我曾经发现仅允许更改文本颜色，a:visited如果您使用伪类（UPD：和背景颜色就是其中之一），则可以更改某些属性。但是由于您的链接是 javascript 链接，因此:visited选择器将不起作用，因此您不能将其作为纯 CSS 解决方案。您将不得不使用某种 javascript。如果 jQuery 没问题，你可以试试这个：

$('a').on('click', function(){$(this).css("background-color","yellow");});

也许您可以更改“showonlyone”功能？然后你可以添加背景更改代码。

于 2013-05-05T09:40:50.173 回答
1

您可以通过简单的 css 代码来做到这一点：

#MenuBar a:visited {
    background: yellow;
}

编辑：

至于这不适用于 javascript 链接（但我没有尝试过），还有 jQuery 和 CSS 的其他解决方案。

jQuery代码：

$(function(){
    $("#MenuBar a").bind("click", function(){
        $(this).addClass("clicked");
    });
});

CSS：

#MenuBar a.clicked {
    background: yellow;
}

编辑2：

好的，如果您只想突出显示最后一次单击的元素，只需将这个简单的行添加到 javascript 代码中就足够了：

$(function(){
    $("#MenuBar a").bind("click", function(){
        $("#MenuBar a").removeClass("clicked"); // Remove all highlights
        $(this).addClass("clicked"); // Add the class only for actually clicked element
    });
});

编辑3：

如果您想拥有更多指向同一位置的链接并在单击时突出显示所有链接，请按照以下步骤操作：

$(function(){
    // Assume that your 'a' elements are in #MenuBar and #colOne
    $("#MenuBar a, #colOne a").bind("click", function(){
        // Remove all highlights
        $("#MenuBar a, #colOne a").removeClass("clicked");

        // Store the name attribute
        var name = $(this).attr("name");

        // Find all elements with given name and highlight them
        $("#MenuBar a[name='"+name+"'], #colOne a[name='"+name+"']").addClass("clicked");
    });
});
于 2013-05-05T09:38:33.763 回答
0 
$('#MenuBar').on('click', 'a', function() {
    $(this).css('background-color', '#bada55');
});

或者，如果您需要独特的颜色，您可以使用数据属性。

<a href="#" data-color="#bada55"></a>

$('#MenuBar').on('click', 'a', function() {
    var $elem = $(this);
    $elem.css('background-color', $elem.data('color'));
});

我建议改为添加类并使用 css 来定义样式。

$('#MenuBar').on('click', 'a', function() {
    $(this).addClass('clicked-menu-link');
});

编辑： 要删除其他点击，请使用：

$('#MenuBar').on('click', 'a', function() {
    var fancyClass = 'clicked-menu-link';
    $('#MenuBar a').removeClass(fancyClass).filter(this).addClass(fancyClass);
});
于 2013-05-05T09:49:47.367 回答
0

您可以将active类添加到单击的锚点。使用 liveNodeList应该工作得非常快，因为您还需要取消选择以前选择的项目：

var a = document.getElementById('Navigation').getElementsByClassName('active');

$('#Navigation').on('click', 'a', function() {
    if (a[0]) a[0].className = '';
    this.className = 'active';
});

http://jsfiddle.net/vBUCJ/

注意：getElementsByClassName是IE9+，如果需要支持旧版本使用jQuery：

var $a = $('#Navigation a');
$('#Navigation').on('click', 'a', function() {
    $a.removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/vBUCJ/1/

于 2013-05-05T09:52:42.053 回答