Javascript 使用JQuery构建选项卡，这是最有效的方法吗？_Javascript_Jquery_Html_Css

Javascript 使用JQuery构建选项卡，这是最有效的方法吗？

javascript jquery html css

Javascript 使用JQuery构建选项卡，这是最有效的方法吗？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,快速提问，我知道这对经验丰富的程序员来说似乎很容易，但我只是在学习，我正在努力学习最佳实践，以及如何最有效地做事，所以请耐心等待！我真的很感激你的建议我正在使用JQuery，并尝试创建一个简单的选项卡功能。我这样做的方式是，我创建了一个包含多个li的ul，然后根据单击的li更新页面上div中的内容我在JSFIDLE中实现了这一点，因此您可以看到我的代码：我想知道这是否是制作标签的好方法？我显示单击的选项卡和隐藏其他选项卡的方式是否有效，因为比方说我有20个选项卡，我是否需要为单击的选项卡设

快速提问，我知道这对经验丰富的程序员来说似乎很容易，但我只是在学习，我正在努力学习最佳实践，以及如何最有效地做事，所以请耐心等待！我真的很感激你的建议

我正在使用

JQuery

，并尝试创建一个简单的选项卡功能。我这样做的方式是，我创建了一个包含多个

li

的

ul

，然后根据单击的

li

更新页面上

div

中的内容

我在JSFIDLE中实现了这一点，因此您可以看到我的代码：

我想知道这是否是制作标签的好方法？我显示单击的选项卡和隐藏其他选项卡的方式是否有效，因为比方说我有20个选项卡，我是否需要为单击的选项卡设置一个

show（）

，为其他19个选项卡设置一个

hide（）

？还是有更有效的方法隐藏其他选项卡

再说一遍，我知道这是一个足够简单的问题，但我只是在寻求如何改进的建议。非常感谢

这是我的

js

 $(document).ready(function () {
                $('#mylist li').click(function (e) {
                    var tab = $(this).html();
                    if (tab == "one") {
                        $('#tab-1-list').show();
                        $('#tab-2-list').hide();
                        $('#tab-3-list').hide();
                    }
                    else if (tab == "two")
                    {
                        $('#tab-2-list').show();
                        $('#tab-1-list').hide();
                        $('#tab-3-list').hide();
                    } else {
                        $('#tab-3-list').show();
                        $('#tab-1-list').hide();
                        $('#tab-2-list').hide();
                    }
                });
            });

这是我的

html

<ul id="mylist">
            <li>one</li>
            <li>two</li>
            <li>three</li>        
        </ul>
        <div id="tab-content">
            <ul id="tab-1-list">
                <li>This is a bullet point for Tab 1</li>
                <li>This is a bullet point for Tab 1</li>
                <li>This is a bullet point for Tab 1</li>
            </ul>
            <ul id="tab-2-list">
                <li>This is a bullet point for Tab 2</li>
                <li>This is a bullet point for Tab 2</li>
                <li>This is a bullet point for Tab 2</li>
            </ul>
            <ul id="tab-3-list">
                <li>This is a bullet point for Tab 3</li>
                <li>This is a bullet point for Tab 3</li>
                <li>This is a bullet point for Tab 3</li>
            </ul>
        </div>

谢谢

请尝试以下方法：

试着这样做：

这可能是一种可能性：

HTLM

<ul id="mylist">
    <li rel="tab-1-list">one</li>
    <li rel="tab-2-list">two</li>
    <li rel="tab-3-list">three</li>        
</ul>

此外，您还可以查看jQueryUI。

下面是一些如何设置这些选项卡样式的示例。

这可能是一种可能性：

HTLM

<ul id="mylist">
    <li rel="tab-1-list">one</li>
    <li rel="tab-2-list">two</li>
    <li rel="tab-3-list">three</li>        
</ul>

此外，您还可以查看jQueryUI。

下面是一些如何设置这些选项卡样式的示例。

最有效的方法是使用类而不是ID

将单击事件附加到

#mylist

的后代

li

上，获取使用

$（）

和

.show（）

单击的当前

li

的索引，并使用选择器显示具有相同索引的类名

.tab

的元素

$（'#mylist>li'）。单击（函数（）{
$（'.tab'）.hide（）.eq（$（this.index（））.show（）；
});
.tab{
显示：无；
}


一个
两个
三


这是表1的要点
这是表1的要点
这是表1的要点


这是表2的要点
这是表2的要点
这是表2的要点


这是表3的要点
这是表3的要点
这是表3的要点

最有效的方法是使用类而不是ID
将单击事件附加到#mylist
的后代li
上，获取使用$（）
和.show（）
单击的当前li
的索引，并使用选择器显示具有相同索引的类名.tab
的元素

$（'#mylist>li'）。单击（函数（）{
$（'.tab'）.hide（）.eq（$（this.index（））.show（）；
});
.tab{
显示：无；
}


一个
两个
三


这是表1的要点
这是表1的要点
这是表1的要点


这是表2的要点
这是表2的要点
这是表2的要点


这是表3的要点
这是表3的要点
这是表3的要点

我可以建议您使用jQuery UI（）。

还有许多其他功能

手风琴
自动完成
钮扣
日期选择器
对话
菜单
等

jQuery UI选项卡示例：
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/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 UI选项卡-默认功能
$（函数（）{
$（“#制表符”）.tabs（）；
});





青蒿素、金樱子、天妇罗、金樱子a、金樱子。库拉比图尔nec arcu。我坐在阿梅特·莫里斯旁边。这是一个很好的例子。埃蒂亚姆·阿利奎特·马萨和洛雷姆。毛里斯·达比乌斯·拉库斯·奥克托·里苏斯。埃涅亚临时乌拉姆科珀狮子座。维瓦摩斯·塞德·马格纳·奎斯·利古拉·埃利弗德·阿迪皮斯。杜伊斯·奥奇。苏打水煎饼或同侧生命。阿利奎姆·努拉。我是阿利奎姆·莫莱斯蒂·埃拉特。这是一种新的葡萄品种。这是我的梦想。同侧相位。努克·特里斯蒂克·坦普斯·莱克图斯
Morbi tincidunt，我坐在医院里，看医生，看医生，看医生，看医生。杜伊斯·塞勒里克·莫莱斯蒂·图皮斯。塞德·弗林利亚，马萨·埃吉特·卢克图斯·马莱苏阿达，梅特斯·厄洛斯·莫莱斯蒂·莱克托斯，我们的厄洛斯·多洛。埃尼安·阿利奎特·弗林利亚。悬钩子在舌苔中是舌苔。在爱神的前庭里祈祷。临床医生。库拉比图尔·奥纳雷·康塞奎特·努克。埃尼安·韦尔梅特斯。乌特·波苏尔·维韦拉·努拉。阿利奎姆·埃拉特·帕特。佩伦茨克康瓦利斯。梅塞纳斯·费吉亚、佩伦特斯·普雷蒂姆·波苏尔、猫科动物奥勒姆·尤伊斯莫·费利斯、欧纳·利奥·尼西·维勒·费利斯。毛里斯·康塞德图尔·托托和珀鲁斯
毛里斯·埃利芬德和图皮斯。酒后驾车。潜力悬钩子。这是一种腐败，是一种腐败，是一种腐败，是一种腐败，是一种腐败，是一种腐败。前庭无前庭。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。Fusce苏打啤酒。这是一个很好的例子。普雷森特欧盟里苏斯亨德雷特酒店
$('#mylist li').click(function (e) {
    rel = $(this).attr('rel');

    $('#tab-content ul').hide(); //hide all tabs

    $('#' + rel).show(); //just show the corresponding
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/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>