Question

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

我有一个javascript，可以在点击导航栏元素时移动边框底部显示，但我还希望下面div的内容根据哪个nabber项目点击进行更改。

我试过getElementByID，但我似乎无法改变我的＃tabs-content div下的类... 我想要一个javascript循环，根据内容的不同，将每个section元素的内容从hide改为show或show to hide。

这是

中的o时钟事件

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

我希望它将类从hide更改为show for section = section2，并从show更改为hide2 for 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

这是你在找什么？由于id中每个section都有href，因此您可以将其加载到适当的位置：

JS

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

更改CSS（除非您希望元素占用页面上的空间最好设置为display：none）：

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

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

JSFIDDLE

从导航点击切换课程内容

1 个答案: