JQuery: Нажмите кнопку(), чтобы изменить элемент списка шрифт

Question

Вот Fiddle

Cant получить эту работу! Я взламываю Jquery.tabs(). Хотите, чтобы текст вкладки был выделен полужирным шрифтом. Не знаете, что я делаю неправильно?

<div> 
    <ul id="tablist"> 
     <li id ="li" aria-selected="true" > 
      <a id="ui-id-1" href="#tabs-Hobby">Hobby</a> 
     </li> 
     <li id="lw" aria-selected="false"> 
      <a id="ui-id-2" href="#tabs-News">News</a> 
     </li> 
    </ul> 
</div> 

JQuery:

$(" ul li a").click(function() 
    { 
    if($("ul").find("li[aria-selected=true]")) { 
    $("ul").find("li[aria-selected=true]").attr("style", "font-weight:bold")  
    } 

    if($("ul").find("li[aria-selected=false]")) { 
     $("ul").find("li[aria-selected=true]").attr("style", "font-weight:normal")  
    } 
    }); 

Answer 1

Все последующие ноты основаны на вашем jsFiddle.

1. Обратите внимание, что этот код работает только один раз на старте, поэтому он будет работать только один раз:

   if($("li[aria-selected=true")) { 
       $(this).css("font-weight", "bold"); 
   } 
   

2. Кроме того, в скрипку вы дали нам, что нет ничего менять этот атрибут: aria-selected

3. Кроме того, вам не хватает ] на селекторе в состоянии if.

4. Лучше было бы не только изменить li «s aria-selected по нажатию на кнопки, но и придать ему CSS class, называемый„открытый“, например. Затем, на свой CSS, дайте все li с этим классом font-weight: bold, и все готово.

5. Вы должны начать использовать Data вместо Attributes.

Answer 2

Попробуйте использовать этот

$(" ul#tablist li a").click(function() 
{ 
if($("ul#tablist").find("li[aria-selected=true]")) { 
$("ul#tablist").find("li[aria-selected=true]").css("font-weight", "bold")  
} 

if($("ul#tablist").find("li[aria-selected=false]")) { 
    $("ul#tablist").find("li[aria-selected=true]").css("font-weight", "normal")  
} 

});

Answer 3

Используйте, соответственно, .css('font-weight', 'bold') и .css('font-weight', 'normal').

Answer 4

Попробуйте это:

$("ul li a").click(function() 
    { 
     if($(this).attr('id') == 'ui-id-1') { 
      $('#ui-id-1').css("font-weight", "bold"); 
      $('#ui-id-2').css("font-weight", "normal"); 
     } else { 
      $('#ui-id-1').css("font-weight", "normal"); 
      $('#ui-id-2').css("font-weight", "bold"); 
     } 
    });