我有一些标签设置,我很难确定如何根据选择的标签显示/隐藏图像。当页面加载tab1和img1可见时。当我点击tab2时,我想隐藏img1并显示img2等。
此示例显示了我到目前为止所拥有的内容: http://jsfiddle.net/NbyXb/
这是HTML:
<div id="tab-area" class="light">
<div class="dummy" id="first">
<input type="radio" name="pane" id="p1" />
<div class="dummy" id="second">
<input type="radio" name="pane" id="p2" />
<div class="dummy" id="third">
<input type="radio" name="pane" id="p3" />
<div class="dummy" id="fourth">
<input type="radio" name="pane" id="p4" />
<div class="dummy">
<ul class="tabs">
<li id="tab1"><span class="active" tabindex="1"></span><label for="p1">Tab1</label></li>
<li id="tab2"><span class="active" tabindex="1"></span><label for="p2">Tab2</label></li>
<li id="tab3"><span class="active" tabindex="1"></span><label for="p3">Tab3</label></li>
<li id="tab4"><span class="active" tabindex="1"></span><label for="p4">Tab4</label></li>
</ul>
<div class="tab-strip"></div>
<div class="panes-scroll">
<div class="panes-items">
<div id="pane1">
<h2>Tab 1 area</h2>
</div>
<div id="pane2">
<h2>Tab 2 area</h2>
</div>
<div id="pane3">
<h2>Tab 3 area</h2>
</div>
<div id="pane4">
<h2>Tab 3 area</h2>
</div>
</div> <!-- end of .panes-items -->
</div> <!-- end of .panes-scroll -->
</div>
</div> <!-- end #fourth -->
</div> <!-- end #third -->
</div> <!-- end #second -->
</div> <!-- end #first -->
</div> <!--end of #tab-area-->
<div class="images">
<img id="tab1-img" src="images/img1.png">
<img id="tab2-img" src="images/img2.png">
<img id="tab3-img" src="images/img3.png">
<img id="tab4-img" src="images/img4.png">
</div>
这是CSS:
#tab-area {
margin: 40px;
}
.dummy {
outline: none; /* For IE */
}
input[name=pane] { display: none;}
.tabs {
position: relative;
list-style: none;
}
.tabs li {
position: relative;
width: 100px;
height: 38px;
float: left;
font: bold 14px Arial, sans serif;
letter-spacing: 1px;
}
.tabs li:first-child {
margin-left: 30px;
}
.tabs li:last-child {
}
.tabs li .active:before {
content: '';
position: absolute;
top: 40px;
left: -10px;
width: 10px;
height: 8px;
}
.tabs li .active:after {
content: '';
position: absolute;
top: 40px;
left: 107px;
width: 10px;
height: 8px;
}
.tab-strip {
content: '';
position: relative;
clear: both;
z-index: 1;
height: 10px;
width: 700px;
}
.panes-scroll {
width: 698px;
position: relative;
overflow: hidden;
border: 1px solid #aaa;
height: 250px;
}
.panes-items {
width: 2800px;
position: relative;
-webkit-transition: margin-left 500ms ease-in-out;
-moz-transition: margin-left 500ms ease-in-out;
-o-transition: margin-left 500ms ease-in-out;
-ms-transition: margin-left 500ms ease-in-out;
transition: margin-left 500ms ease-in-out;
}
.panes-items > div {
padding: 20px;
width: 660px;
height: 0;
font: 12px Arial, sans serif;
float: left;
}
.panes-items > div:first-of-type { height: auto; }
.tabs li:first-child .active { display: block;}
input[name=pane]:checked + .dummy .panes-items > div { height: 0; }
input[name=pane]:checked + .dummy .tabs li .active { display: none;}
#p1:checked + .dummy .panes-items {
margin-left: 0;
}
#p2:checked + .dummy .panes-items {
margin-left: -700px;
}
#p3:checked + .dummy .panes-items {
margin-left: -1400px;
}
#p4:checked + .dummy .panes-items {
margin-left: -2100px;
}
#p1:checked + .dummy .panes-items > div:nth-of-type(1) ,
#p2:checked + .dummy .panes-items > div:nth-of-type(2) ,
#p3:checked + .dummy .panes-items > div:nth-of-type(3) ,
#p4:checked + .dummy .panes-items > div:nth-of-type(4) {
height: auto;
}
#p1:checked + .dummy .tabs li:nth-child(1) .active,
#p2:checked + .dummy .tabs li:nth-child(2) .active,
#p3:checked + .dummy .tabs li:nth-child(3) .active,
#p4:checked + .dummy .tabs li:nth-child(4) .active {
display: block;
}
#tab1-img {
display: block;
}
#tab2-img {
display: none;
}
#tab3-img {
display: none;
}
#tab4-img {
display: none;
}
答案 0 :(得分:0)
您可以使用一点点javascript(jQuery具体)来轻松完成此任务 的 JS:强>
$(function(){
$('.tabs label').click(function(){
$('.images img').hide();
$('#tab'+($(this).parent('li').index()+1)+'-img').show();
});
});
FIDDLE: http://jsfiddle.net/EZ33Y/1/(我用实际图片替换了图片,因为原始图片没有加载)
此外,请注意,通常甚至标签本身也应该通过JavaScript完成。这允许进一步的浏览器兼容性,并且是标准的处理方法。