-1

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

有没有一种 CSS 方式，当我点击Oneor时Two，它变成class="active"for OneorTwo并从中删除Home？

4

5 回答 5

2

You can highlight each link with CSS alone, but not by using classes. Rather, use the :target pseudo class: 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>
于 2013-06-04T23:29:00.083 回答
1

您可以使用 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>
于 2013-06-05T02:05:24.240 回答
1

您将需要以某种方式编辑 html，css 无法更改元素类。您可以向 js 编写一个小函数来在单击事件上执行此操作，并从旧菜单项中删除该类并将其添加到新选择的菜单项中。

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

于 2013-06-04T23:05:17.760 回答
0

不专门使用 CSS。DOM 的链接和修改等行为特性超出了 CSS 的范围。

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

或者使用javascript。

于 2013-06-04T23:09:32.110 回答
0

使用 :target 如果要在没有 javascript 的情况下制作菜单，它会更灵活

于 2019-11-02T22:37:47.287 回答