Question

在我想要的默认状态下，所有＆＃39;被选中。点击另一个项目将更改所有其他类，以便“这个＆＃39;有班级，其他人没有。我的问题是为什么不能全部＆＃39;被重新选择？

HTML：

<ul class="nav2">
    <li><a href="#" class="orange2">ALL</a></li>
    <li><a href="#" class="orange">PERSONAL</a></li>
    <li><a href="#" class="orange">PHOTOGRAPHY</a></li>
    <li><a href="#" class="orange">WORK</a></li>
</ul>

CSS：

body{
    background: #000000;
}
.nav2{
    float: none;
    list-style-type:none;
    overflow: hidden;
    clear: both;
    text-align: left;
    display: inline-flex;
}

.nav2 li{
    clear: both;
    overflow: hidden;
    margin-left: 10px;  
}

.orange{
    opacity: .5;
    color: #FF9000;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 8px;
    border: 1px solid #000; 
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.orange:hover{
    opacity: 1;
    color:#000000;
    background: #FF9000;
}

.orange2{
    color: #FF9000;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 8px;
    border: 1px solid #FF9000; 
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.orange2:hover{
    color:#000000;
    background: #FF9000;
}

使用Javascript：

$('a.orange').click(function(){
$('a.orange2').addClass('orange');
$('a.orange').removeClass('orange2');
$(this).removeClass('orange');
$(this).addClass('orange2');
});

Answer 1

在您的Javascript代码中，您只将onClick侦听器应用于a.orange（a个orange元素

$('a.orange').click(function(){ ... });

自＆＃34; ALL＆＃34;菜单条目没有orange，但orange2作为其类，它不受此影响。

您可以通过在选择器中加入a.orange2来解决此问题：

$('a.orange, a.orange2').click(function(){ ... });

Answer 2

也许是这样的：

 <ul class="nav2">
      <li><a href="#" class="orange2">ALL</a></li>
      <li><a href="#" class="orange2">PERSONAL</a></li>
      <li><a href="#" class="orange2">PHOTOGRAPHY</a></li>
      <li><a href="#" class="orange2">WORK</a></li>
 </ul>

 $('a.orange2').click(function(){
      $('a.orange2').removeClass('orange2').addClass('orange');
      $(this).addClass('orange2').removeClass('orange');
 });

http://jsfiddle.net/khzehpfx/

如何一次选择一个项目？

2 个答案: