jquery tab like效果 - 在点击时显示隐藏div

Question

我正在学习jquery,并且我正在尝试创建一个像"点击一样只有一个div应该一次显示"的效果标签,我写了以下内容,但我觉得它没有正确的做法甚至我的代码工作的东西.知道如何改进这个吗？也许让它成为一种功能？

这是一个工作演示

$(document).ready(function(){
  $("#tabone").click(function(){
        $('#box-one').css("display", "block");
        $('#box-two').css("display", "none");
        $('#box-three').css("display", "none");
  });
});

$(document).ready(function(){
  $("#tabtwo").click(function(){
        $('#box-one').css("display", "none");
        $('#box-two').css("display", "block");
        $('#box-three').css("display", "none");
  });
});

$(document).ready(function(){
  $("#tabthree").click(function(){
        $('#box-one').css("display", "none");
        $('#box-two').css("display", "none");
        $('#box-three').css("display", "block");
  });
});

谢谢

Answer 1

使用.box基于的公共类您可以使用选定的索引隐藏和显示div ()

HTML

<ul id="ul-menu-list">
    <li id="tabone">How it Works</li>
    <li id="tabtwo">Features</li>
    <li id="tabthree">FAQ</li>
</ul>
<di id="box-one" class="box">Tab one</di>
<di id="box-two" class="box">Tab two</di>
<di id="box-three" class="box">Tab three</di>

JS

$(document).ready(function(){
    $("#ul-menu-list li").click(function () {
        $('.box').hide().eq($(this).index()).show();  // hide all divs and show the current div
    });
});

DEMO