DEMO

Question

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

我正在与JQuery合作，而我正试图制作一个简单的Tab功能。我已经完成这项工作的方式是我创建了一个包含多个ul的{{1}}，然后根据点击的li我更新li中的内容在页面上。

我已经在JSFiddle中实现了这一点，因此您可以看到我的代码：http://jsfiddle.net/javacadabra/oeh7Lj62/

我想知道这是制作标签的好方法吗？以及我是否显示我点击并隐藏其他人的方式是有效的，因为我们说例如我有20个标签，我需要点击标签div并{ {1}}其他19人？或者show()其他标签是否有更有效的方式？

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

这是我的hide()

hiding

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

谢谢

Answer 1

我建议你使用jQuery UI（http://jqueryui.com/）许多其他功能也是如此。

手风琴
自动填充
按钮
日期选择器
对话框
菜单
等

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

Answer 2

尝试这种方式：

DEMO

$(document).ready(function () {
    $('#mylist li').click(function (e) {
        var index = +($(this).index())+1;
        $('#tab-content ul').hide();
        $('#tab-'+index+'-list').show();
    });
});

Answer 3

这可能是一种可能性：

<强> 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>

我添加了一个属性rel，用于通过id

引用相应的标签

<强> JQuery的

$('#mylist li').click(function (e) {
    rel = $(this).attr('rel');

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

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

<强> DEMO

此外，您还可以查看Jquery UI tabs。 Here是如何设置这些标签样式的一些示例。

Answer 4

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

将点击事件附加到li后代的#mylist，获取使用li和$(this).index()点击的当前.show()的索引使用.eq()选择器具有相同索引的类名为.tab的元素。

＆＃13;

$('#mylist > li').click(function() {
  $('.tab').hide().eq($(this).index()).show();
});

＆＃13;

.tab {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="tab-content">
  <ul class="tab" 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 class="tab" 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 class="tab" 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>

＆＃13;

您也可以分别使用.fadeIn()和.fadeOut()代替.show()和.hide()。

＆＃13;

$('#mylist > li').click(function() {
  $('.tab').fadeOut().eq($(this).index()).fadeIn();
});

＆＃13;

#tab-content {
  position: relative;
}
.tab {
  position: absolute;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="tab-content">
  <ul class="tab" 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 class="tab" 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 class="tab" 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>

＆＃13;

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

4 个答案:

DEMO