我被要求尝试复制一个内置在.php中的页面(他们拥有该页面)并将其重新创建为.html和.css中的可编辑页面,以便在Concrete中使用,但我正面临着使导航栏正常运行的一些问题。
http://jsfiddle.net/TYhnb/819/
它应该只显示相应标签下的内容,方法是改变内容显示:来自' none'阻止'阻止'反之亦然,同时改变了它的阶级。我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;
答案 0 :(得分:2)
你绝对可以用HTML和CSS做到这一点...使用标签来检查备用无线电输入元素,然后使用检查状态来确定相邻的div元素显示。
请参阅下面的第二个示例,点击“
”选项卡突出显示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技巧,您可以将其扩展为不仅可以在点击时显示内容,还可以突出显示当前选定的标签...
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;
}
答案 1 :(得分:0)
可以使用CSS3,快速谷歌搜索显示我this article,其中包含一些演示(查看演示页面链接的末尾)。
如果您需要向后浏览器支持,那么可能使用jQuery或一些提供此功能的JavaScript库。我过去和jqueryUI tabs一样好运。
答案 2 :(得分:0)
如果您可以在项目中使用JavaScript并导入jQuery和jQuery UI,那么一个简单的方法就是使用jQuery UI
使用小提琴进行演示:
http://jsfiddle.net/Vinyl/GT926/1/
在jquery UI上进行演示 http://jqueryui.com/tabs/$( "#tabs" ).tabs();