2014-09-25 3 views
0

У меня возникли проблемы с изменением цвета фона и шрифта при активной ссылке (li: active не работает) Пожалуйста, помогите мне, ребята.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> 

+5

Там нет 'ли: active' внутри вас предоставляется демо. –

+0

Можете ли вы указать, что вы ожидаете, когда будете использовать ': active', и какой результат вы видите? Когда я пытаюсь это сделать в Firefox, IE и Chrome, он работает, но они обрабатывают его немного иначе. Firefox и Chrome будут запускать 'li: active', когда вы нажимаете на' span' внутри него, но IE запускает его только тогда, когда вы нажимаете 'li', а не' span' внутри него. – Guffa

ответ

0

Некоторые браузер не делают никакой поддержки: активный селектор кроме ссылок элемента (а), как IE7

Просьба уточнить, на каком браузере не видите, что он работает?

Благодаря

также как упомянуто другим пользователем, вы скрипку с отсутствующим: активный CSS!

0

Вы должны использовать: (http://jsfiddle.net/csdtesting/rbL7ncf2/6/)

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

Целые ЯШ:

$(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; 
} 
Смежные вопросы