javascript - 单击后更改链接的背景颜色

标签 javascript jquery html css

请问如何在点击链接后将每个链接(围绕它的矩形)的背景颜色更改为另一种颜色,而其他链接仍保持其原始背景颜色.

每个链接对应同一个 html 文件中的一个 div(我没有在此处包含)。

重点是让观众知道他们在哪个链接。顺便说一下,如果可以的话,我正在寻找可能的最快代码^_^(纯cssjavascript 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");

    });
});

它没有用,以前用过的也没有用

最佳答案

similar question to yours 中我曾经发现只有 允许更改文本颜色 如果您使用 a:visited 伪类(UPD: 和 background-color 是其中之一,则可以更改某些属性他们)。但是由于您的链接是 javascript 链接,:visited 选择器将不起作用,因此您不能将其作为纯 CSS 解决方案来实现。您将不得不使用某种 javascript。如果 jQuery 没问题,你可以试试这个:

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

也许您可以更改“showonlyone”函数?然后你可以添加后台更改代码。

关于javascript - 单击后更改链接的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16383171/

相关文章:

html - 在 DIV 内填充

javascript - 如何在 html5 中构建表单时显示警告标志?

javascript - 需要 onclick 是按钮而不是热链接

javascript - 将 blob 转换为 base64

jquery - 如何强制在选择选项中添加输入?

javascript - 当达到计数 div 中的滚动点时,计数将开始

html - 移动设备的 CSS 字体大小

html - 子 div 扩展到父 div 之外

javascript - 在 Javascript 中相当于什么?

jquery - 有人能告诉我如何将这样的表格居中放置在页面/div 的中间吗?