我正在创建一个简单的应用程序,其中有2个标签-Bio
和Timeline
,每个标签都有自己的内容。我想根据我的点击显示/隐藏内容。我的HTML,CSS和JS文件如下所示-(https://jsfiddle.net/m25owpse/)
$(document).ready(function() {
$('.tablink').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.dashfolio-about' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
.about-header-container {
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
}
.about-header-container>a {
padding-right: 10px;
}
#bio-dashfolio {
margin-top: 20px;
}
.tablink:active {
color: red;
}
.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
<div class="dashbolio-about">
<div class="about-header-container">
<a class="bio-header tablink" href="#bio-dashfolio"> Bio </a>
<a class="timeline-header tablink" href="#timeline-dashfolio"> Timeline </a>
</div>
<div>
<div class="tabcontent" id="bio-dashfolio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed
vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit
diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus.
Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor</p>
</div>
<div class="tabcontent" id="timeline-dashfolio">
<p>Random text is awesome don't you think?!</p>
</div>
</div>
</div>
但是,这并没有解决问题。我认为自己走在正确的轨道上,所以请帮助我了解我要去哪里错了。提前致谢!
您的问题在以下行中:
$('.dashfolio-about' + currentAttrValue).show().siblings().hide();
改成:
$(currentAttrValue).show().siblings().hide();
片段:
$(document).ready(function() {
$('.tablink').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
.about-header-container {
margin-left: 80px;
margin-top: 10px;
font-size: 15px;
}
.about-header-container>a {
padding-right: 10px;
}
#bio-dashfolio {
margin-top: 20px;
}
.tablink:active {
color: red;
}
.tabcontent {
display:none;
}
.tabcontent.active {
display:block;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class = "dashbolio-about">
<div class= "about-header-container">
<a class = "bio-header tablink" href= "#bio-dashfolio"> Bio </a>
<a class = "timeline-header tablink" href= "#timeline-dashfolio"> Timeline </a>
</div>
<div>
<div class = "tabcontent" id= "bio-dashfolio" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor </p>
</div>
<div class = "tabcontent" id = "timeline-dashfolio">
<p> Random text is awesome don't you think?! </p>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句