1

我有一个列表（空格只是为了视觉清晰）：

<li class="a">      A     </li>
<li class="b">      B     </li>
<li class="c">      C     </li>
<li class="a b">    A B   </li>
<li class="a c">    A C   </li>
<li class="b c">    B C   </li>
<li class="a b c">  A B C </li>

我有一系列“控制”：

<a class="show-a" href="#">A</a>
<a class="show-b" href="#">B</a>
<a class="show-c" href="#">C</a>
<a class="show-all active" href="#">ALL</a>

我有一些 CSS：

li           {color: red; }
 .deactivate {color: #ddd; }
a            {color: #ddd; }
 .active     {color: blue; }

我想做两件事：

  1. 单击相应<a>控件时，将.deactivate类添加/删除到相应的<li>段，如果.show-a单击，则应用于.deactivate所有没有类的元素.a。因此，从不再需要它.deactivate的任何 s 中删除该类。<li>

  2. 反映控件中的当前选择。即添加/删除.active类到各自的锚链接。（这是我永远找不到答案的部分）。

笔记：

  • .active在任何给定时间只能有一个控件。像单选按钮，但通过 CSS 更具样式。
  • 似乎更好的解决方案使用 jQuery 和 toggleClass。

RE其他答案：有很多（例如http://jsfiddle.net/Cx4uK/2/）但是

  • 没有那个地址#2
  • 大多数显示/隐藏而不是切换类
  • 解释的很少，因此很难迭代答案并理解它们是如何工作的（这是我的最终目标）。
4

2 回答 2

1

此解决方案使用该data-selector属性来保存与特定链接相关的项目的选择器。它有助于使 JS 真正干净。

至于活动链接，我们只需.active从所有链接中删除并将其添加到刚刚单击的链接中。

jsFiddle

JS

$(document).ready(function () {
    $('.links a').click(function () {

        // Remove .active from all links then add to the clicked one
        $('.links a').removeClass('active');
        $(this).addClass('active');

        // Remove .active from all lis then use the attribute data-selector to set
        // the relevant items
        $('.letters li').removeClass('active');
        $(this.getAttribute('data-selector')).addClass('active');
    });
});

HTML

<div class="links">
    <a class="show-a" href="#" data-selector=".a">A</a>
    <a class="show-b" href="#" data-selector=".b">B</a>
    <a class="show-c" href="#" data-selector=".c">C</a>
    <a class="show-all active" href="#" data-selector=".a,.b,.c">ALL</a>
</div>

<ul class="letters">
    <li class="a">      A     </li>
    <li class="b">      B     </li>
    <li class="c">      C     </li>
    <li class="a b">    A B   </li>
    <li class="a c">    A C   </li>
    <li class="b c">    B C   </li>
    <li class="a b c">  A B C </li>
</ul>

CSS

.active {
    background-color:#AAA;
}
于 2013-03-26T07:36:20.420 回答
0

我假设你想要这样的东西：

 $(function () {
    $("#user-controls div").first().addClass('active'); // <---add this line
    $("#user-controls").on('click', 'div', function () {
       $(this).addClass('active').siblings().removeClass('active'); //<--and this
       var classToShow = this.id.split('-')[1],
        filter = classToShow === "all" ? 'div' : '.' + classToShow;
        $("#devices").children().show().not(filter).hide();
    });
});

结帐小提琴

在这里我做了一个 CSS 类.active{}：

.active {
  background:red !important;
  color:yellow;
}

并且在页面加载第一个 div 之后，#user-controls应该all应用.activecss 类。

有了这个：

$("#user-controls div").first().addClass('active');

那么如果点击发生在其他链接上，那么在这种情况下，这里.siblings()是有用的功能。

$(this).addClass('active').siblings().removeClass('active');

让我们分解一下：

$(this).addClass('active')

此行将类添加.active到单击的链接和

.siblings().removeClass('active');

这个删除了应用于同一级别的其他链接的其他链接类。

于 2013-03-26T07:38:03.627 回答