如何在导航栏中更改当前链接的颜色

喷砂机

如何为当前选中(单击)的导航栏中的链接“块”指定背景颜色?

想法是该导航栏位于页面顶部,并且因为链接是针对iframe的,所以主索引html不会刷新。我找不到解决此问题的方法。可以用CSS完成,还是需要JavaScript或其他工具?

提前致谢!

HTML:

<table>
<tr>
  <td>
    <div class="menuint">
    <ul>
      <li><a href="page1.html" target="ifrm"><h1>LINK 1</h1></a></li>
      <li><a href="page2.html" target="ifrm"><h1>LINK 2</h1></a></li>
      <li><a href="page3.html" target="ifrm"><h1>LINK 3</h1></a></li>
      <li><a href="page4.html" target="ifrm"><h1>LINK 4</h1></a></li>
      <li><a href="page5.html" target="ifrm"><h1>LINK 5</h1></a></li>
      <li><a href="page6.html" target="ifrm"><h1>LINK 6</h1></a></li>
    </ul>
    </div>
  </td>
</tr>
</table>

和CSS:

.menuint ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menuint li {
    float: left;
    padding: 0px 0px 0px 1px;
    background-color: #414141;
    border: 1px solid black;
    border-right-style: none;
    border-top-style: none;
    border-bottom-style: none;
}

.menuint a:link, a:visited {
    display: block;
    width: 127px;
    padding: 6px 0px 6px 0px;
    text-decoration: none;
/*  background-image: url("img/TESTbgrsmall.png");  */

}

.menuint a:hover, a:active {
    background-color: #7A991A;
}

h1 {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 0px;
}

演示:http : //jsfiddle.net/Ag47D/3/

mplungjan

这是我使用您的代码和注释的建议

注意添加的内容data-id以及如何将其与$("#" + $(this).data('id'))

$(function() {
  $('#nav li a').click(function() {
    $('#nav li').removeClass();
    $("#" + $(this).data('id')).addClass('active');
  });
});
.navbar #nav > .active > a {
  color: red;
  background-color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar">
  <div class="navbar-fixed-top">
    <div class="container" style="width: auto;">
      <div class="nav-collapse" id="nav-collapse">
        <ul class="nav" id="nav">
          <li id="home"><a href="home.html" data-id="home" target="ifrm">Home</a></li>
          <li id="skill"><a href="skill.html" data-id="skill" target="ifrm">Skill</a></li>
          <li id="research"><a href="research.html" data-id="research" target="ifrm">Research</a></li>
          <li id="link"><a href="link.html" data-id="link" target="ifrm">Link</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<iframe name="ifrm"></iframe>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

需要更改当前链接的背景颜色

来自分类Dev

如何更改当前所选菜单项的颜色?

来自分类Dev

如何仅更改某些导航栏链接颜色?

来自分类Dev

如何在Visual Studio 2013中更改当前线条颜色?

来自分类Dev

如何在Yii2中更改导航栏颜色

来自分类Dev

如何在Yii2中更改当前用户

来自分类Dev

更改我的引导导航栏中链接的颜色

来自分类Dev

如何更改导航栏的颜色?

来自分类Dev

如何在导航栏中更改后退按钮的颜色?

来自分类Dev

如何在GNU Make中更改当前目录

来自分类Dev

如何在launchscreen.storyboard中更改颜色或导航栏?

来自分类Dev

如何在PWA中更改Android导航栏的颜色?

来自分类Dev

SwiftUI仅更改当前视图的导航标题颜色

来自分类Dev

如何在SwiftUI中更改导航栏的背景颜色?

来自分类Dev

Eclipse:如何更改当前单词的背景颜色?

来自分类Dev

Netbeans 11-在xdebug中更改当前行的颜色

来自分类Dev

尝试更改当前链接的背景颜色和文本颜色

来自分类Dev

如何在Bootstrap的此导航栏中更改文本的颜色?

来自分类Dev

如何在Git中更改当前工作目录?

来自分类Dev

如何更改当前链接的样式

来自分类Dev

如何在CSS中更改当前菜单项的突出显示颜色?

来自分类Dev

如何更改当前链接的字体颜色

来自分类Dev

如何在导航栏中更改活动链接的颜色

来自分类Dev

如何在Bootstrap 3.3.6导航栏中更改悬停颜色?

来自分类Dev

如何在Vim中“更改当前行”?

来自分类Dev

如何在Materialize CSS导航栏中更改所有链接的文本颜色?

来自分类Dev

如何根据用户的上一页更改当前页面中的 URL 超链接?

来自分类Dev

如何在调试模式下更改当前断线颜色?

来自分类Dev

如何更改导航栏中的文本颜色?

Related 相关文章

  1. 1

    需要更改当前链接的背景颜色

  2. 2

    如何更改当前所选菜单项的颜色?

  3. 3

    如何仅更改某些导航栏链接颜色?

  4. 4

    如何在Visual Studio 2013中更改当前线条颜色?

  5. 5

    如何在Yii2中更改导航栏颜色

  6. 6

    如何在Yii2中更改当前用户

  7. 7

    更改我的引导导航栏中链接的颜色

  8. 8

    如何更改导航栏的颜色?

  9. 9

    如何在导航栏中更改后退按钮的颜色?

  10. 10

    如何在GNU Make中更改当前目录

  11. 11

    如何在launchscreen.storyboard中更改颜色或导航栏?

  12. 12

    如何在PWA中更改Android导航栏的颜色?

  13. 13

    SwiftUI仅更改当前视图的导航标题颜色

  14. 14

    如何在SwiftUI中更改导航栏的背景颜色?

  15. 15

    Eclipse:如何更改当前单词的背景颜色?

  16. 16

    Netbeans 11-在xdebug中更改当前行的颜色

  17. 17

    尝试更改当前链接的背景颜色和文本颜色

  18. 18

    如何在Bootstrap的此导航栏中更改文本的颜色?

  19. 19

    如何在Git中更改当前工作目录?

  20. 20

    如何更改当前链接的样式

  21. 21

    如何在CSS中更改当前菜单项的突出显示颜色?

  22. 22

    如何更改当前链接的字体颜色

  23. 23

    如何在导航栏中更改活动链接的颜色

  24. 24

    如何在Bootstrap 3.3.6导航栏中更改悬停颜色?

  25. 25

    如何在Vim中“更改当前行”?

  26. 26

    如何在Materialize CSS导航栏中更改所有链接的文本颜色?

  27. 27

    如何根据用户的上一页更改当前页面中的 URL 超链接?

  28. 28

    如何在调试模式下更改当前断线颜色?

  29. 29

    如何更改导航栏中的文本颜色?

热门标签

归档