如何使一组链接表现得像按钮，当按下一个链接时，它显示一些隐藏的内容，当按下另一个链接时，它隐藏先前的内容并显示其他内容？默认情况下，必须单击第一个链接以显示第一组隐藏内容。
这是我的小提琴： http://jsfiddle.net/sr1fqt4n/
我尝试使用以下脚本切换可见性：
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
问题在于，默认情况下不会显示第一个链接的内容，并且在单击另一个链接时不会隐藏任何内容。另外，链接的行为不像按钮。
所需的结果看起来像他们在第2分集剧情：https://baike.baidu.com/item/%E6%9D%A5%E8%87%AA%E6%98%9F%E6%98%9F%E7%9A%84%E4%BD%A0/12029711
上的内容答案 0 :(得分：0)
您需要制作多个标签，无需使用<a>标记，在这种情况下，您可以轻松使用a plugin like this
但是，如果您坚持要对其进行编码，请尝试使用CSS活动类作为要显示其标签和内容的标志
答案 1 :(得分：0)
您的事件处理程序仅应用于每次点击时的每个a href。因此，事件处理程序仅在被单击的元素上激活，并且不会影响其他元素，因为其他元素没有发生任何事件。
您需要使用自己的代码吗？或像Aras提到的那样，有许多可用的插件。引导程序和jquery（以及任何库）都具有选项卡面板的解决方案。
然后使用<a>标签定义超链接。 <button>或<div>标签可能更合适。
但是，如果您需要普通的JS解决方案，可以使用带有默认设置代码的笔。基本上，您需要一个for循环来控制切换。 https://codepen.io/Ghandour/pen/LjpXPx?editors=1010
for (i = 0; i < tabButton.length; i++) {
tabContent[i].style.display = 'none';
tabButton[i].classList.remove('active');
}
很高兴解释代码中是否有任何查询。
答案 2 :(得分：0)
<div class="pagination-bar">
<div class="pagination-btn">
<a class="part1">1</a>
<a class="part2">2</a>
<a class="part3">3</a>
<a class="part4">4</a>
<a class="part5">5</a>
</div>
</div>
<div class="content-canvas">
<ul class="part1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit euismod in pellentesque massa placerat duis ultricies. Ornare massa eget egestas purus viverra accumsan. Dictumst quisque sagittis purus sit. Elementum facilisis leo vel fringilla est ullamcorper. Arcu odio ut sem nulla pharetra diam sit. Sed vulputate odio ut enim. Non diam phasellus vestibulum lorem. Nunc vel risus commodo viverra maecenas. Morbi tempus iaculis urna id volutpat lacus laoreet non. Morbi tristique senectus et netus. Massa sed elementum tempus egestas sed. Orci dapibus ultrices in iaculis. Malesuada bibendum arcu vitae elementum. Nisl vel pretium lectus quam id leo in vitae turpis.</p>
</ul>
<ul class="part2">
<p>Sit amet nisl purus in mollis. Convallis aenean et tortor at risus. Morbi quis commodo odio aenean sed. Non diam phasellus vestibulum lorem sed risus ultricies. Nam libero justo laoreet sit. Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Parturient montes nascetur ridiculus mus mauris vitae. Feugiat pretium nibh ipsum consequat nisl. Pellentesque id nibh tortor id aliquet. Pharetra pharetra massa massa ultricies. Eu sem integer vitae justo eget magna fermentum.</p>
</ul>
<ul class="part3">
<p>Dolor purus non enim praesent elementum facilisis leo vel. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Nec nam aliquam sem et tortor. Viverra suspendisse potenti nullam ac. Vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Posuere urna nec tincidunt praesent semper feugiat nibh sed. At consectetur lorem donec massa sapien faucibus et. Fermentum odio eu feugiat pretium nibh. Nullam non nisi est sit amet facilisis magna. Suscipit tellus mauris a diam. Arcu odio ut sem nulla pharetra. Ullamcorper malesuada proin libero nunc. Integer malesuada nunc vel risus. Eu mi bibendum neque egestas congue quisque.</p>
</ul>
<ul class="part4">
<p>Bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida. Aliquet lectus proin nibh nisl condimentum id venenatis a. Fames ac turpis egestas sed tempus. Nisl vel pretium lectus quam id leo in vitae. Fringilla phasellus faucibus scelerisque eleifend. Ut diam quam nulla porttitor massa. Duis convallis convallis tellus id interdum. Sed vulputate mi sit amet. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Pretium quam vulputate dignissim suspendisse in. Ipsum suspendisse ultrices gravida dictum fusce. Amet cursus sit amet dictum sit.</p>
</ul>
<ul class="part5">
<p>Senectus et netus et malesuada. Magnis dis parturient montes nascetur. Et ultrices neque ornare aenean. Sed vulputate mi sit amet mauris commodo. Praesent tristique magna sit amet purus gravida quis blandit turpis. Eget lorem dolor sed viverra. Sit amet aliquam id diam. Viverra mauris in aliquam sem fringilla ut morbi. Id cursus metus aliquam eleifend mi in nulla. Viverra accumsan in nisl nisi scelerisque eu ultrices. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Et leo duis ut diam quam. Ut etiam sit amet nisl purus in mollis nunc. Donec pretium vulputate sapien nec sagittis.</p>
</ul>
</div>
jQuery(document).ready(function($) {
$('.content-canvas').find('ul').hide();
$('.content-canvas ul:first-child').show();
$('.pagination-btn a:first-child').addClass('current');
$('.pagination-btn').find('a').click(function(){
$('.pagination-btn').find('a').removeClass('current');
var currentclass=$(this).attr('class');
$(this).addClass('current');
$('.content-canvas').find('ul').each(function(){
if($(this).attr('class')==currentclass)
{
$('.content-canvas').find('ul').hide();
$(this).show();
}
else
{
$(this).hide();
}
});
});
});
.current{
background: #23a1ba;
color: #fff!important;
border: 1px solid #23a1ba!important;
cursor: default!important;
}
.pagination-bar {
display: inline-block;
padding: 0 0 25px 0;
}
.pagination-btn {
display: inline-block;
text-align: left;
}
.pagination-btn a{
border: 1px solid #DCDCDC;
border-radius: 4px;
display: inline-block;
text-align: center;
margin: 10px 5px 0 0;
color: #333;
width: 70px;
padding: 2px 0 2px 0;
}
.pagination-btn a:hover {
border: 1px solid #23a1ba;
color: #23a1ba;
text-decoration: none;
cursor: pointer;
}
.content-canvas ul{
padding: 30px;
color: black;
background: #eaf8fb;
border-radius: 8px;
}
@media screen and (max-width: 713px) {
.pagination-btn {
text-align: center;
}
}