这是我的 html,css 和 javascript 都在一个地方
JS
var links = document.getElementsByTagName("a"); //get the links
var len = links.length;
for(var i = 0; i<len; i++) {
links[i].onclick = handleClick; // add onclick handler
}
function handleClick(e){
var target = e.target;
var id = target.id + "content";
document.getElementById(id).style.zIndex = 10;
}
HTML
<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
<div class="section" id="tabe1content">
<div>
<p> content1 </p>
</div>
</div>
<a href="#" id="tabe2">Tabe2</a>
<div class="section" id="tabe2content">
<div>
<p> content2 </p>
</div>
</div>
<a href="#" id="tabe3">Tabe3</a>
<div class="section" id="tabe3content">
<div>
<p> content3 </p>
</div>
</div>
</div>
CSS
.section{
position:absolute;
float:left;
width:500px;
background-color:gray;
left:0;
top:0;
height:300px;
margin-top:30px;
}
#tabbed{
position:relative;
}
a {
margin-right:10px;
float:left;
display:block;
}
当我测试它时,它只工作一次。第二次点击表1还是显示表3,请大家看看哪里出了问题,有没有比我的更好的方法?
最佳答案
- 代表 parent
- 追踪最大的 z-index 值
.section{
position:absolute;
float:left;
width:500px;
background-color:gray;
left:0;
top:0;
height:300px;
margin-top:30px;
z-index: 1;
}
#tabbed{
position:relative;
}
a {
margin-right:10px;
float:left;
display:block;
}
<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
<div class="section" id="tabe1content">
<div>
<p> content1 </p>
</div>
</div>
<a href="#" id="tabe2">Tabe2</a>
<div class="section" id="tabe2content">
<div>
<p> content2 </p>
</div>
</div>
<a href="#" id="tabe3">Tabe3</a>
<div class="section" id="tabe3content">
<div>
<p> content3 </p>
</div>
</div>
</div>
var root = document.getElementById("tabbed");
var veryTop = 2;
root.onclick = handleClick;
function handleClick(e){
var target = e.target;
if ( target.tagName !== 'A' ) { e.preventDefault(); return; }
var tab = document.getElementById( target.id + 'content' );
tab.style.zIndex = ( veryTop++ ).toString();
e.preventDefault();
}
附言。应该可以解决您的“一次工作”问题。
关于javascript - 我正在尝试在 javascript 中创建选项卡式内容,但它只工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19011721/