Question

以下是plunker - http://plnkr.co/edit/WZ6cqCcXaLuOCXnZdCa6?p=preview

是否有CSS方式，以便当我点击One或Two时，class="active"或One变为Two并从{{Home移除1}}？

Answer 1

你需要以某种方式编辑html，css没有能力改变元素类。您可以在js上为js编写一个小函数来执行此操作，并从旧菜单项中删除该类并将其添加到新选择的菜单项中。

像这样： http://plnkr.co/edit/6B5v2KrZonuI33dJySS6?p=preview

Answer 2

您可以仅使用CSS突出显示每个链接，但不能使用类突出显示。而是使用:target伪类：http://codepen.io/pageaffairs/pen/kqoma

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

ul, li, div {margin: 0; padding: 0;}
ul {
    list-style: none; 
    overflow: hidden; 
    padding: 10px;
}

li {
    float: left; 
    margin: 0 20px 0 0;
}

li a {
    display: block; 
    padding: 10px 20px; 
    text-decoration: none; 
    color: #08c;
    border-radius: 20px;
}

li a:hover, li a:target {
    background: #08c; 
    color: white;
}

</style>

</head>

<body>

<h1>Hello <code>:target</code>!</h1>

<div class="header">   
    <ul class="nav nav-pills">   
        <li class="active">
            <a href="#home" id="home">Home</a>
        </li>
        <li>
            <a href="#one" id="one">One</a>
        </li>
        <li>
            <a href="#two" id="two">Two</a>
        </li>
    </ul>
</div>

</body>
</html>

Answer 3

你可以使用jQuery，遵循以下格式：

       switch (window.location.pathname) {
            case '/THE_URL_HERE':
               $('.nav-home').addClass('active');
               break;
            case '//THE_URL_HERE':
               $('.nav-one').addClass('active');
               break;
            case '//THE_URL_HERE':
               $('.nav-two').addClass('active');
               break;
        }

并在HTML中添加类：

<h1>Hello Plunker!</h1>
    <div class="header">
      <ul class="nav nav-pills">
        <li class="nav-home">
          <a href="#">Home</a>
        </li>
        <li class="nav-one"><a href="#">One</a></li>
        <li class="nav-two"><a href="#">Two</a></li>
      </ul>
    </div>

Answer 4

不使用CSS。行为特征（例如链接和DOM的修改）超出了CSS的范围。

但是，您可以构建链接以修改URL的查询字符串（例如？item = 1），并使用生成的GET值在导航上设置类。

或者使用javascript。

Answer 5

使用：target，如果不使用javascript制作菜单，则更加灵活

是否有CSS方法使菜单上的class =“active”切换？

5 个答案: