如何让导航栏根据单击的按钮显示文本

Question

我被要求尝试复制一个内置于 .php 的页面（他们拥有该页面），并将其重新创建为 .html 和 .css 中的可编辑页面以用于 Concrete，但我面临一些问题让导航栏正常运行。

http://jsfiddle.net/TYhnb/819/

它应该只通过更改内容显示来在适当的选项卡下显示内容：功能从“无”到“阻止”，反之亦然，同时更改其类。我 90% 确定这将无法单独使用 css 和 html 来解决，所以有人对我将如何实现这一点有任何建议吗？

CSS，HTML 处于困境中

---

.tabs #tab-container-1-nav li.activeli a {
background: #1f5497;
color: #fff;
}

.tabs #tab-container-1-nav li a {
padding: 10px 15px;
background: #f2f2f2;
color: #4D4D4D;
text-decoration: none;
font-weight: bold;
font-size: 14px;
text-align: center;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}

.tabs #tab-container-1-nav li {
float: left;
display: inline;
margin-right: 8px;
}

.tabs ul {
list-style: none;
}

.main ul {
list-style: inside;
}

.main ul li {
font-size: 13px;
margin: 5px 0;
color: #0d3161;
}

div#tab-container-1 {
margin-top: 57px;

Answer 1

您绝对可以只使用 HTML 和 CSS...使用标签检查备用单选输入元素，然后使用其检查状态来确定相邻的 div 元素显示。

请参阅下面的第二个示例，了解点击时标签突出显示...

Example 1

HTML

<label for='tab1Content'>Tab 1</label>
<label for='tab2Content'>Tab 2</label>
<label for='tab3Content'>Tab 3</label>
<br />
<br />
<input type='radio' name='content' id='tab1Content' checked='true' />
<div>Tab 1 content</div>
<input type='radio' name='content' id='tab2Content' />
<div>Tab 2 content</div>
<input type='radio' name='content' id='tab3Content' />
<div>Tab 3 content</div>

CSS

label {
    padding: 10px 15px;
    background: #f2f2f2;
    color: #4D4D4D;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
input[name=content] {
    display:none;
}
input[name=content] +div {
    display:none;
}
input[name=content]:checked +div {
    display:block;
}

---

使用更多的 HTML 和 CSS 技巧，您可以将其扩展为不仅在点击时显示内容，还可以突出显示当前选定的选项卡...

Example 2: More complex - with tab selection

HTML

<div id='wrapper'>
    <div>
        <input type='radio' name='content' id='tab1Content' checked='true' />
        <label for='tab1Content'>Tab 1</label>
        <div>Tab 1 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab2Content' />
        <label for='tab2Content'>Tab 2</label>
        <div>Tab 2 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab3Content' />
        <label for='tab3Content'>Tab 3</label>
        <div>Tab 3 content</div>
    </div>
</div>

CSS

label {
    padding: 10px 15px;
    background: #f2f2f2;
    color: #4D4D4D;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
#wrapper {
    position:relative;
}
#wrapper > div {
    float:left;
    margin-right:10px;
}
input[name=content] {
    display:none;
}
input[name=content]~div {
    display:none;
    overflow:hidden;
    position:absolute;
    top:40px;
    left:0;
}
input[name=content]:checked~div {
    display:block;
}
input[name=content]:checked~label {
    background:lightblue;
}

Answer 2

可以使用 CSS3，快速的谷歌搜索告诉我this article，其中包含一些演示（查看最后的演示页面链接）。

如果您需要向后浏览器支持，则可能使用 jQuery 或一些提供此功能的 javascript 库。过去我对jqueryUI tabs 很幸运。

Answer 3

如果您可以在项目中使用 JavaScript 并导入 jQuery 和 jQuery UI，那么一个简单的方法就是使用 jQuery UI

用你的小提琴演示：

http://jsfiddle.net/Vinyl/GT926/1/

jQuery UI 上的演示 http://jqueryui.com/tabs/

$( "#tabs" ).tabs();