Question

我正在学习jquery，并且我正在尝试创建一个类似于效果的选项卡“点击，一次只显示一个div”，我写了以下内容，但我觉得它不正确甚至我的代码工作的方式做事。知道如何改进这个吗？也许让它成为一种功能？

这是一个有效的demo

$(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之类的公共类您可以隐藏并使用选定的 index()

显示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

Answer 2

只有一次点击事件，并使用较新的on方法。

$("#ul-menu-list").on('click','li', function(e) {
  $('.box').hide().eq($(this).index()).show();
});

Answer 3

我不确定di元素是什么，但如果结构相同，这对你来说无论如何都会有效。

$(document).ready(function(){
  $("ul li").click(function(){
      $('di[id^="box-"]').css("display", "none");
      $('di[id^="box-"]').eq($(this).index()).css("display", "block");
  });
});

DEMO

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

3 个答案:

HTML

JS

DEMO