如何解决单击时显示和隐藏不同的信息
我试图让右边的每个数字都有不同的信息,我希望它在点击一个数字时显示信息。非常感谢任何帮助,谢谢!
解决方法
我假设您的网页看起来像这样 (HTML5):
<p class="num">1</p>
<p class="num">2</p>
<p class="num">3</p>
<p class="num">4</p>
<h1 id="header">lorum ipsum</h1>
<p id="paragraph">lorum ipsum dolor sit amet</p>
我建议做这样的事情(JavaScript):
var nums = document.getElementsByClassName("num");
var headers = ["1 header","2 header","3 header","4 header"];
var paragraphs = ["1 paragraph","2 paragraph","3 paragraph","4 paragraph"];
var a=0;
while(a<nums.length){
nums[a].id = a.toString();
nums[a].onclick = function(){
document.getElementById("header").innerHTML = headers[parseInt(this.id)];
document.getElementById("paragraph").innerHTML = paragraphs[parseInt(this.id)];
};
a++
}
,
只需使用 jQuery。
$(document).on('click','li',function(){
let stage = $(this).attr('data-for');
$('.stages > div').removeClass('active');
$(`div[id=${stage}]`).addClass('active');
})
.container{
width: 100%;
height: 800px;
}
.left{
width: 100px;
height: 100%;
list-style: none;
padding: 0;
margin: 0;
float: left;
}
.left > li{
width: 100%;
height: 100px;
margin: 0 0 5px 0;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
.right {
width: calc(100% - 100px);
height: 100%;
float: left;
}
.stages{
position: relative;
width: 100%;
height: 100%;
float: left;
}
.stages > div{
width: 100%;
height: 100%;
position: absolute;
left:0;
top: 0;
display: none;
padding: 20px;
}
.stages > div.active{
display: block;
}
<div class="container">
<ul class="left">
<li data-for="stage0">0</li>
<li data-for="stage1">1</li>
<li data-for="stage2">2</li>
</ul>
<div class='right'>
<div class="stages">
<div id="stage0" class="active">
<h1>Stage 0</h1>
<p>content...</p>
</div>
<div id="stage1">
<h1>Stage 1</h1>
<p>content...</p>
</div>
<div id="stage2">
<h1>Stage 2</h1>
<p>content...</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。