Question

当链接处于活动状态时，我无法让背景颜色和字体发生变化（li：活动不起作用）请帮助我们。

点击链接： http://jsfiddle.net/rbL7ncf2/2/

<div id="wrapper">
<div id="menu"> 
    <ul>
        <li style="background-color:#5b90bf; color:#fff; font-weight:bold;">Produtos</li>
        <li><span class="button"  data-type="pdt1">Teste 1</span></li>
        <li><span class="button" data-type="pdt2">Teste 2</span></li>
        <li><span class="button" data-type="pdt3">Teste 3</span></li>
        <li><span class="button" data-type="pdt4">Teste 4</span></li>
        <li><span class="button" data-type="pdt5">Teste 5</span></li>
        <li><span class="button"  data-type="pdt6">Teste 6</span></li>
        <li><span class="button" data-type="pdt7">Teste 7</span></li>
        <li><span class="button" data-type="pdt8">Teste 8</span></li>
        <li><span class="button" data-type="pdt9">Teste 9</span></li>
        <li><span class="button" data-type="pdt10">Teste 10</span></li>
    </ul>
</div>

<div class="boxes">        
    <div class="box" id="pdt1">classe 1</div>
    <div class="box" id="pdt2">classe 2</div>
    <div class="box" id="pdt3">classe 3</div>
    <div class="box" id="pdt4">classe 1</div>
    <div class="box" id="pdt5">classe 5</div>
    <div class="box" id="pdt6">classe 6</div>
    <div class="box" id="pdt7">classe 7</div>
    <div class="box" id="pdt8">classe 8</div>
    <div class="box" id="pdt9">classe 9</div>
    <div class="box" id="pdt10">classe 10</div>
</div>

Answer 1

某些浏览器不支持：主动选择器除了链接元素（a）之外，如IE7

请详细说明哪些浏览器看不到它？

由于

也正如其他用户所提到的，你错过了：active css！

Answer 2

您必须使用：（http://jsfiddle.net/csdtesting/rbL7ncf2/6/）

   $('ul li').removeClass('selected');
     $(this).closest("li").addClass('selected');

全js：

$(document).ready(function () {
    $('.button').click(function(){
         $('ul li').removeClass('selected');
         $(this).closest("li").addClass('selected');
        var type = $(this).data('type');
        $('.boxes div').hide();      
        $('#' + type).fadeIn("slow");
    });    
});

添加了css：

#menu ul li.selected:hover {
    background-color: #5b90bf;
    color:#303030;
}
.selected{
    color:#303030;
    background-color: #5b90bf;
}

李：活动在我的代码中不起作用

2 个答案: