个人中心
gpt4 book ai didi

javascript - 使用 JQuery 构建 Tabs，最高效有效的方法？

转载 作者：太空宇宙 更新时间：2023-11-03 20:39:32 25 4
gpt4 key购买 nike

快速提问，我知道这对于非常有经验的程序员来说似乎很容易，但我只是在学习，我正在努力学习最佳实践以及如何最有效地做事，所以请多多包涵!如果有任何建议，我将不胜感激。

我正在使用 JQuery 并尝试制作一个简单的 Tab 功能。我这样做的方法是创建一个包含多个 li 的 ul 然后根据 li 单击我更新内容div 在页面上。

我已经在 J​​SFiddle 中实现了它，因此您可以看到我的代码:http://jsfiddle.net/javacadabra/oeh7Lj62/

我想知道这是否是制作标签的好方法？以及我显示单击并隐藏其他选项卡的方式是否有效，因为假设我有 20 个选项卡，我是否需要为单击的选项卡设置 show() 并hide() 其他 19 个？或者是否有更有效的方法来隐藏其他选项卡？

同样，我知道这是一个足够简单的问题，但我只是在寻找有关如何改进的建议。非常感谢。

这是我的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>

这是我的css

#tab-1-list{display:none;}
#tab-2-list{display:none;}
#tab-3-list{display:none;}

谢谢

最佳答案

我可以建议您使用 jQuery UI ( http://jqueryui.com/ )。
还有许多其他功能。

  • Accordion
  • 自动完成
  • 按钮
  • 日期选择器
  • 对话
  • 菜单
  • 等等

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>

DEMO

关于javascript - 使用 JQuery 构建 Tabs，最高效有效的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27918071/

25 4 0
文章推荐： Python 模块分组
文章推荐： css - 我的 CSS 未应用于具有 ID 的元素
文章推荐： python - 使用字典和循环操作文件夹中每个文件的值
文章推荐： html - Css，检查类的下一个选择器
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com