Question

我的javascript是我最前端的网络知识，我认为这是实现我的功能的一种更有效的方式，而不是我的方式。

基本上，我有一个网站，你有一些<li>项目，点击它们会显示一个特定的div，如果另一个div（链接到另一个<li>项目）当前可见，它会隐藏它并显示它各自的div。它还为active项分配<li>类，为活动部分提供不同颜色的图标（标准用户体验实践）。

这是我的HTML和Javascript功能。

    <li id="general">General</li>
    <li id="blog">Blog</li>
    <li id="twitter">Twitter</li>

和javascript（只是看着它很痛）

$(document).ready(function() {

$("#general").addClass("active");

$("#general").click(function() {
    $(".data-tab").hide();
    $(".settings-general").toggle();
    $("li").removeClass("active");
    $("#general").addClass("active");
});

$(".settings-twitter").hide();

$("#twitter").click(function() {
    $(".data-tab").hide();
    $(".settings-twitter").toggle();
    $("li").removeClass("active");      
    $("#twitter").addClass("active");
});

$(".settings-blog").hide();

$("#blog").click(function() {
    $(".data-tab").hide();
    $(".settings-blog").toggle();
    $("li").removeClass("active");      
    $("#blog").addClass("active");
})

});

不要误会我的意思很好！但它看起来很糟糕，jQuery可能会以更快的速度实现这一目标。对JS初学者有什么建议吗？

Answer 1

只需创建一个函数即可完成两次相同的操作，或者您只需循环遍历您想要设置的每个代码。

function setUp(name){
    $(".settings-"+name).hide();

    $("#"+name).click(function() {
        $(".data-tab").hide();
        $(".settings-"+name).toggle();
        $("li").removeClass("active");      
        $(this).addClass("active");
    });
}

setUp('blog');
setUp('twitter');

Answer 2

使用选项上的data-属性对整个事物进行数据驱动。然后，相同的代码可以处理任意数量的项目而无需更改代码：

http://jsfiddle.net/TrueBlueAussie/8hvofd6m/2/

$(document).ready(function () {
    $(".menu:first").addClass("active");
    $('.settings-general').show();
    $(".menu").click(function () {

        var $active = $(this);

        // Unhilight the inactive items
        $(".menu").not($active).removeClass("active");

        // Then highlight just the active item
        $active.addClass("active");

        // Seek the target using a jQuery selector in the data-setting attribute
        var $setting = $($active.data('setting'));

        // Hide the others
        $('.settings').not($setting).hide();

        // Show the selected one
        $setting.show();
    });
});

data-setting属性可以是任何选择器，类，id或复杂。所以你可以做一些很酷的事情：

<li class="menu" data-setting="#info .subinfo:first">First info</li>

Answer 3

您可以在父容器上设置单个类，并使用css隐藏元素，例如：

<style>
    div.tab { display: none }

    body.general li.general { font-weight: bold; }
    body.general div.tab.general { display: block; }

    body.blog li.blog { font-weight: bold; }
    body.blog div.tab.blog { display: block; }

    body.twitter li.twitter { font-weight: bold; }
    body.twitter div.tab.twitter { display: block; }
</style>

<body>
    <ul>
      <li class="general">General</li>
      <li class="blog">Blog</li>
      <li class="twitter">Twitter</li>
    </ul>

    <div class="general tab">general tab</div>
    <div class="blog tab">blog tab</div>
    <div class="twitter tab">twitter tab</div>

    <script>
        $('li').click(function () {
            $('body').attr('class', $(this).attr('class'));
        });
    </script>
</body>

有关工作示例，请参阅http://jsfiddle.net/szzdyp1n/。

用于隐藏和显示div的优雅javascript

3 个答案: