Question

我有一个单页网站，1个总是在顶部菜单上有锚链接。我想在活动时更改菜单的颜色。我不知道如何才能获得哪个菜单处于活动状态，以及我通过哪个锚链接。

这就是我所拥有的：

<div id="menu" class="default">
    <img align="left" width="8%" height="100%"src="<?php bloginfo('template_directory'); ?>/pics/a.jpeg"/>
    <nav>
        <ul>
            <li><a class="active" href="#menu1">menu1</a></li>
            <li><a class="inactive" href="#menu2">menu2</a></li>
            <li><a class="inactive"  href="#menu3">menu3</a></li>
            <li><a class="inactive"  href="#menu4">menu4</a></li>
        </ul>
    </nav>
</div><!-- close menu -->

#inactive {
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#active {
    color: #deb48f;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

颜色改变了。我需要一个javascript来改变这些菜单的类，这取决于现在屏幕上的哪一个。

Answer 1

如果您愿意为您的网站添加引导程序，那么执行此操作的简单方法是使用带有scrollspy插件的引导程序。
http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

另外，作为旁注，我会通过在nav标签中添加id =“tabs”并将css更改为

来删除对非活动类的需求。

#tabs a{
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#tabs a.active{
    color: #deb48f;
}

请注意，＃表示标记的id，句点用于表示标记的css。

这是我在StackOverflow上的第一篇文章，所以我希望我做得对，这有帮助！

编辑：
这里有一些你可以在div之后添加的jQuery，这样你至少可以在点击它们时更改标签的颜色：

<script>
    $('li > a').click(function() {
        $('li > a').removeClass();
        $(this).addClass('active');
    })
</script>

Answer 2

您可以从HTML中删除非活动类，并将CSS块重命名为nav ul li a而不是.class。然后使用这个jQuery：

$(document).ready(function(){
    $("a").click(function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
    });
});

以下是修改过的HTML：

<div id="menu" class="default">
    <img align="left" width="8%" height="100%"src="<?php bloginfo('template_directory'); ?>/pics/a.jpeg"/>
    <nav>
        <ul>
            <li><a class="active" href="#menu1">menu1</a></li>
            <li><a href="#menu2">menu2</a></li>
            <li><a href="#menu3">menu3</a></li>
            <li><a href="#menu4">menu4</a></li>
        </ul>
    </nav>
</div><!-- close menu -->

CSS：

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.active {
    color: #deb48f;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

Answer 3

这不是静态html函数，所以你必须使用javascript （简单jQuery）来实现这个魔法。

接下来做： 1：必须确定事件触发事件 2：它将如何改变颜色

首先是元素上的click事件，它触发动作。这是在jQuery：$(selector).on('click', function() { *function body* });

其次，您必须仅使用background-color定义.active类：

.active {
    background-color: black;
}

当您单击导航元素时，从所有元素中删除.active类，并仅为单击的内容添加。

function body =

$allmenulink = $('#mynav a'); 
$allmenulink.removeClass('active'); 
$this = $(this)
$this.addClass('active');

以下是完整示例：

// click event on a element in mynav
$('#mynav a').on('click', function() {
  // select all menu link element
  $allmenulink = $('#mynav a');
  // remove .active class from all menu element
  $allmenulink.removeClass('active');
  // clicked element
  $this = $(this)
    // add .active class for clicked element
  $this.addClass('active');
});

li {
  list-style: none;
  float: left;
}
li>a {
  color: white;
  text-decoration: none;
  background-color: blue;
  padding: 10px;
}
/* set background for menu item with active class */

li>a.active {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="mynav">
  <ul>
    <li><a class="active" href="#menu1">menu1</a>
    </li>
    <li><a class="" href="#menu2">menu2</a>
    </li>
    <li><a class="" href="#menu3">menu3</a>
    </li>
    <li><a class="" href="#menu4">menu4</a>
    </li>
  </ul>
</nav>

在活动菜单上锚定菜单不同的CSS

3 个答案: