javascript - 从导航点击切换类内容

Question

我有一个简单的页面，导航栏中有 15 个元素(在 jsfiddle 示例中只有 4 个元素以保持代码简短)。

我有一个 javascript 可以在点击导航栏元素时移动边框底部显示，但我也希望下面的 div 内容根据点击的 nabber 元素而改变。

这是 jsfiddle .

我试过 getElementByID 但我似乎无法更改我的 #tabs-content div 下的类...我想要一个 javascript 循环，它根据内容是什么将每个部分元素的类的内容从隐藏更改为显示或显示更改为隐藏。

这是我的点钟事件

<li class="tab-current"><a href="#section1" onclick="display(section1) class="icon icon-dash"><span>Dashboard</span></a></li>

我希望它能将 id=section2 的类从隐藏更改为显示，section2 的类从显示更改为隐藏:

<div id="tabs-content">
    <section id="section1" class="show">
        <p>1</p>
    </section>
    <section id="section2" class="hide">
        <p>2</p>
    </section>
</div>

有什么想法吗？

干杯，

Answer 1

这是您要找的吗？由于您在 href 中拥有每个 section 的 id，您可以提取它以加载适当的部分:

JS

var currentTab = $(this).find("a").attr("href");
$(currentTab).show().siblings("section").hide();

更改 CSS(除非您希望元素占用页面上的空间，否则最好设置为显示:无):

#tabs-content section.show {
  display: block
}

#tabs-content section.hide {
  display: none;
}

JSFIDDLE