当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
when click on the first li, it show content one, when click on second li, it shows content two
<style type="text/css">
.web_index div {width: 400px; height: 300px; background: #eee;}
ul li{width: 100px; height: 30px; line-height: 30px; list-style: none; display: inline-block; *display: inline; zoom: 1;}
</style>
<script type="text/javascript">
function licker(){
var lier=document.getElementsByTagName("li");
var diver=document.getElementsByClassName("web_index")[0].getElementsByTagName("div");
for(var i=0;i<lier.length;i++)
{
for(j=0;j<diver.length;j++)
{
if(i==j)
{
diver[j].style.display=block;
}
else{
diver[j].style.display=none;
}
}
}
}
</script>
.html:
<ul>
<li onclick="licker()" class="li01">the first li</li>
<li onclick="licker()" class="li02">the second li</li>
<li onclick="licker()" class="li03">the third li</li>
<div class="web_clear"></div>
</ul>
<div class="web_index">
<div style="display:block" >content one</div>
<div style="display:none">content two</div>
<div style="display:none">content three</div>
</div>
当单击第一个李时,它显示内容一,其他全部隐藏,当单击第二个李时,它显示内容二。为什么我的代码不起作用。如何纠正。谢谢,
你应该为你li
分配一个索引:
<ul>
<li onclick="licker(0)" class="li01">the first li</li>
<li onclick="licker(1)" class="li02">the second li</li>
<li onclick="licker(2)" class="li03">the third li</li>
<div class="web_clear"></div>
</ul>
和您的函数:
function licker(id){
var diver=document.getElementsByClassName("web_index")[0].getElementsByTagName("div");
for(var i=0;i<diver.length;i++){
if(i==id){
diver[i].style.display='block';
} else {
diver[i].style.display='none';
}
}
}
JSFiddle 示例
试试这个
<ul>
<li onclick="licker(this);">the first li</li>
<li onclick="licker(this);">the second li</li>
<li onclick="licker(this);">the third li</li>
</ul>
<div class="web_index">
<div style="display: block">content one</div>
<div style="display: none">content two</div>
<div style="display: none">content three</div>
function licker(sender) {
var lier = document.getElementsByTagName("li");
var diver = document.getElementsByClassName("web_index")[0].getElementsByTagName("div");
for (var i = 0; i < lier.length; i++) {
if (lier[i] != sender) continue;
for (j = 0; j < diver.length; j++) {
if (i == j)
diver[j].style.display = 'block';
else
diver[j].style.display = 'none';
}
}
}
</script>
相关文章:
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- 显示指令时调用指令方法
- 显示内容时出现问题
- 仅当显示可见时,jquery/javascript或css-css用于第n个子级
- 只显示潜水时悬停按钮X时间-可以'我不能使它正常工作
- 图表JS未显示悬停时的小数据
- jQuery's'单击'当用户高亮显示文本时,函数
- 显示模式时删除滚动条
- 当网络显示200时处理404
- JavaScript 函数在尝试更改显示属性时不会生效
- Php 搜索表单显示结果时无需按搜索按钮,而它应该等到按下按钮才能显示它们
- 传单显示悬停时的地图 - 地图加载不正确
- 如何在底部显示 100px 时在滚动时触发 jquery 函数
- 不是使用 jquery 显示/隐藏时的预期“效果”
- 如何在显示网页时调用脚本 jquery
- 如何在使用不同的显示键时选择预键入项时获取 Json 对象
- 使用jQuery突出显示效果时 window.name 的奇怪问题
- jQuery Yii 更新数据表,仅当显示 tab 时
- 在全日历.js中显示事件时出现问题