logo标签列表

如何将选项卡设置为已选中状态

javascriptjqueryjquery-ui-tabs
4

我有一个任务，要做一个选项卡菜单。我有三个选项卡。我想在选择它时更改背景颜色。我该怎么做？我想将所选标签的背景设置为红色。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>


</body>
</html>
在你的 jQuery 代码中，将类名为 active 的 class 添加到所选标签。 - A_AR
选中标签后，ui-tabs-active类将添加到该标签上，只需对其进行样式设置即可。 - billyonecan
你想将背景设置为选项卡主体还是选项卡按钮？ - VisioN
@Vision-selected Tab 按钮 - Nithin Viswanathan
@Agent1 对于那种定制化，您应该使用 ThemeRoller。 - letiagoalves
5个回答
2
只需将以下内容添加到您的CSS中：

简单地将以下内容添加到您的CSS中：

.ui-state-active a {
    background-color: #ff0000;
}

DEMO: http://jsfiddle.net/6hjVh/

1
$("#tabs").on("click", "a:not(.current)", function ( event ) {  
        $(".current", event.delegateTarget).removeClass("current");
        $(this).addClass("current");
    });

然后在你的css中添加.current并对其进行样式设置。

1

jQuery 代码

$('#tabs ul').on('click', 'li:not(.current)', function() {
    $(this).addClass('current').siblings('li').removeClass('current');
});

CSS 代码：
.current{ background: red; }
ul li {float: left; padding: 5px; list-style: none;}

演示

1
JQuery UI的目的是创建自己的主题来处理默认行为。使用不同的背景颜色来选择选项卡就是其中之一。您只需要使用主题生成器，在“可点击：活动状态”部分选择所需的颜色即可。
除非您想在JQuery UI样式中处理更具体的内容，否则只需要生成一个主题。 ThemeRoller
0
$("#tabs").tabs({
    create: function(event, ui){          
       $(this).tabs("option", "active", indexOf tab);
    }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接