-4

Here is the Fiddle

Cant get this to work! I am hacking Jquery.tabs() functionality. Want the tab text to turn bold when selected. Not sure what I am doing wrong? 

<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")       
    }
  });
4

4 回答 4

1

以下所有注释均基于您的 jsFiddle。

  1. 请注意，此代码在开始时只运行一次，因此它只会运行一次：

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

  2. 此外，在你给我们的小提琴中，没有什么改变这个属性：aria-selected

  3. 此外，您在条件]中的选择器上缺少 a 。if

  4. 更好的方法是不仅更改按钮单击时的li' aria-selected，还要给它一个CSS class'，例如，称为 'open'。然后，在你的 CSS 上，给所有li的 s 加上这个 class font-weight: bold，你就完成了。

  5. 您应该开始使用Data而不是Attributes。

于 2013-08-19T05:03:01.257 回答
1

尝试这个 ：

$("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");
        }
    });
于 2013-08-19T05:13:16.737 回答
0

尝试使用这个

$(" 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")       
}

});

于 2013-08-19T05:05:29.000 回答
0

分别使用.css('font-weight', 'bold')and.css('font-weight', 'normal')代替。

于 2013-08-19T05:06:32.910 回答