js或jq+css 显示或隐藏div 完整代码示例
点击不同的链接在同一页面显示不同的div<divclass="myzt"><!--左侧列表导航--><divclass="leftbtn"><ulclass="navna...
点击不同的链接在同一页面显示不同的div
<div class="myzt">
<!-- 左侧列表导航 -->
<div class="leftbtn">
<ul class="nav nav-list" data-container="#search-results-container" data-loader=".loading-content">
<li class="active" id="wzbtn">
<a data-pjax="true" href="" onclick="opens(1)" id="dis1"> 文章
<span class="badge">1124+</span></a>
</li>
<li>
<a data-pjax="true" href="" onclick="opens(2)" id="dis2">文集
<span class="badge">213</span></a>
</li>
<li>
<a data-pjax="true" href="" onclick="opens(3)" id="dis3">作者
<span class="badge">40</span></a>
</li>
</ul>
</div>
<!-- 点击不同链接右侧显示不同的内容 -->
<div class="rightzt">
<!-- 文章列表 -->
<div class="wzys" id="dis1" style="display:block;">
<span class="glyphicon glyphicon-list-alt" style="font-size:2em;"> 文章</span><br/><br/>
<p>我想找个平台来展示我写的内容，仅此而已。。。。</p>
<span class="glyphicon glyphicon-book"></span><a href="#">见闻录</a>
<span class="glyphicon glyphicon-heart-empty"></span><a href="#">0</a>
<span class="glyphicon glyphicon-bookmark"></span><a href="#">1</a>
<hr/>
</div>
<!-- 文集列表 -->
<div class="wjys" id="dis2" style="display:none;">
<span class="glyphicon glyphicon-list-alt" style="font-size:2em;"> 文章</span><br/><br/>
<a href="#">Vaayne?著,</a><span>20篇文章,1人关注</span><br/>
<hr/>
</div>
<!-- 作者列表 -->
<div class="zzys" id="dis3" style="display:none;">
<button type="button" class="btn btn-default" >
<img alt="" src="packages/static/img/QRcode.png" style="height: 38px;width:38px" class="img-circle" >文章
</button><br/><br/>
<span>写了0个字，0篇文章，得到0个赞，被1人关注，关注了0人</span>
<hr/>
</div>
</div>
</div>
<script>
function opens(obj){
for(var i=1;i<=3;i++){
if(i==obj){
document.getElementById("dis"+i).style.display="block";
}else{
document.getElementById("dis"+i).style.display="none";
}
}
</script>
点击不同链接js不起作用，希望哪位大神可以帮我一下，详细代码示例。谢谢！ 展开
<div class="myzt">
<!-- 左侧列表导航 -->
<div class="leftbtn">
<ul class="nav nav-list" data-container="#search-results-container" data-loader=".loading-content">
<li class="active" id="wzbtn">
<a data-pjax="true" href="" onclick="opens(1)" id="dis1"> 文章
<span class="badge">1124+</span></a>
</li>
<li>
<a data-pjax="true" href="" onclick="opens(2)" id="dis2">文集
<span class="badge">213</span></a>
</li>
<li>
<a data-pjax="true" href="" onclick="opens(3)" id="dis3">作者
<span class="badge">40</span></a>
</li>
</ul>
</div>
<!-- 点击不同链接右侧显示不同的内容 -->
<div class="rightzt">
<!-- 文章列表 -->
<div class="wzys" id="dis1" style="display:block;">
<span class="glyphicon glyphicon-list-alt" style="font-size:2em;"> 文章</span><br/><br/>
<p>我想找个平台来展示我写的内容，仅此而已。。。。</p>
<span class="glyphicon glyphicon-book"></span><a href="#">见闻录</a>
<span class="glyphicon glyphicon-heart-empty"></span><a href="#">0</a>
<span class="glyphicon glyphicon-bookmark"></span><a href="#">1</a>
<hr/>
</div>
<!-- 文集列表 -->
<div class="wjys" id="dis2" style="display:none;">
<span class="glyphicon glyphicon-list-alt" style="font-size:2em;"> 文章</span><br/><br/>
<a href="#">Vaayne?著,</a><span>20篇文章,1人关注</span><br/>
<hr/>
</div>
<!-- 作者列表 -->
<div class="zzys" id="dis3" style="display:none;">
<button type="button" class="btn btn-default" >
<img alt="" src="packages/static/img/QRcode.png" style="height: 38px;width:38px" class="img-circle" >文章
</button><br/><br/>
<span>写了0个字，0篇文章，得到0个赞，被1人关注，关注了0人</span>
<hr/>
</div>
</div>
</div>
<script>
function opens(obj){
for(var i=1;i<=3;i++){
if(i==obj){
document.getElementById("dis"+i).style.display="block";
}else{
document.getElementById("dis"+i).style.display="none";
}
}
</script>
点击不同链接js不起作用，希望哪位大神可以帮我一下，详细代码示例。谢谢！ 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<script>
function opens(obj) {
for (var i = 1; i <= 3; i++) {
if (i == obj) {
document.getElementById("dis" + i).style.display = "block";
} else {
document.getElementById("dis" + i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="myzt">
<!-- 左侧列表导航 -->
<div class="leftbtn">
<ul class="nav nav-list" data-container="#search-results-container" data-loader=".loading-content">
<li class="active" id="wzbtn"> <a data-pjax="true" href="###" onclick="opens(1)"> 文章
<span class="badge">1124+</span></a>
</li>
<li> <a data-pjax="true" href="###" onclick="opens(2)">文集
<span class="badge">213</span></a>
</li>
<li> <a data-pjax="true" href="###" onclick="opens(3)">作者
<span class="badge">40</span></a>
</li>
</ul>
</div>
<!-- 点击不同链接右侧显示不同的内容 -->
<div class="rightzt">
<!-- 文章列表 -->
<div class="wzys" id="dis1" style="display:block;"> <span class="glyphicon glyphicon-list-alt" style="font-size:2em;"> 文章</span>
<br/>
<br/>
<p>我想找个平台来展示我写的内容，仅此而已。。。。</p> <span class="glyphicon glyphicon-book"></span><a href="#">见闻录</a>
<span class="glyphicon glyphicon-heart-empty"></span><a href="#">0</a>
<span class="glyphicon glyphicon-bookmark"></span><a href="#">1</a>
<hr/>
</div>
<!-- 文集列表 -->
<div class="wjys" id="dis2" style="display:none;"> <span class="glyphicon glyphicon-list-alt" style="font-size:2em;"> 文章</span>
<br/>
<br/> <a href="#">Vaayne?著,</a><span>20篇文章,1人关注</span>
<br/>
<hr/>
</div>
<!-- 作者列表 -->
<div class="zzys" id="dis3" style="display:none;">
<button type="button" class="btn btn-default">
<img alt="" src="packages/static/img/QRcode.png" style="height: 38px;width:38px" class="img-circle">文章</button>
<br/>
<br/> <span>写了0个字，0篇文章，得到0个赞，被1人关注，关注了0人</span>
<hr/>
</div>
</div>
</div>
</body>
</html>
追问
请问你改的哪里？没看出和原来有什么不同？
追答
你新建一个html，全都复制粘贴进去就看得出来了
都是琐碎的东西，说不清
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
