javascript - 如何一次选择一个元素？

Question

在默认状态下，我希望选择“ALL”。单击另一个元素将更改所有其他类，以便“this”具有该类，而其他则没有。我的问题是为什么不能重新选择“ALL”？

jsFiddle:http://jsfiddle.net/u5g9vLkx/

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(){ ... });

因为“ALL”菜单条目没有orange，而是orange2作为它的类，所以它不受那个影响。

您可以通过在选择器中包含 a.orange2 来解决此问题:

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