当您选择标签时，我试图让标签内的内容向上滑动。因此，当您单击选项卡时，该选项卡内的文本将从底部向上滑动。
$(document).ready(function() {
var selectedtab;
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
if (selectedtab) $("#" + selectedtab).hide();
$("#" + tab_id).slideUp("slow", function() {
// Animation complete.
});
selectedtab = tab_id;
$(this).addClass('current');
})
}).container {
display: flex;
}
.purpleBackground {
align-self: flex-end;
background-color: #65308b;
opacity: 0.9;
width: 60%;
height: 80%;
bottom: 0px !important;
padding: 60px 40px;
border: 1px solid #fff;
}
.whiteText {
color: #fff;
}
ul.tabs {
margin: 0px;
padding: 0px;
}
ul.tabs li {
background: none;
color: #222;
display: block;
padding: 20px 15px;
cursor: pointer;
font-size: 17px;
border-width: 0px 0px 1px 0px;
}
ul.tabs li.current {
background: #65308b;
color: #fff;
}
.tab-content {
display: none;
color: #fff;
}
.tab-content.current {
display: inherit;
}
.sectionBackground {
background: url("http://www.choicecare.ds-
demo.co.uk/wp-content/uploads/2017/12/placeholder.png");
background-size:cover;
display: flex;
/** I have just put a height value, but when you come to use match height
See Line 14 in the .JS**/
height: 450px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-4 ">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">General Care</li>
<li class="tab-link" data-tab="tab-2">Dementia Care</li>
<li class="tab-link" data-tab="tab-3">End of Life (EOLC)</li>
<li class="tab-link" data-tab="tab-4">Hospital Discharge</li>
<li class="tab-link" data-tab="tab-5">Review and Monitoring</li>
<li class="tab-link" data-tab="tab-6">Holiday Cover</li>
<li class="tab-link" data-tab="tab-7">Advanced Care Planning (ACP)
</li>
</ul>
</div>
<div class="col-md-8">
<div class="sectionBackground">
<div class="purpleBackground">
<div id="tab-1" class="tab-content current">Test</div>
<div id="tab-2" class="tab-content">Test</div>
<div id="tab-3" class="tab-content">Test</div>
</div>
</div>
</div>
</div><!-- container -->
我会在JS中做些什么来完成这项工作？非常感谢正确的代码和解释！
答案 0 :(得分：0)
这是一个很好的问题lian geary。在最长时间内，我们需要使用标签系统。您可以使这些选项卡动画渐弱或滑动。现在我将向您展示如何在HTML5，CSS2和jQuery（主要是JavaScript）中制作标签系统的代码......
HTML5代码......
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Webcoachbd Tab System tutorials</title>
<link rel="stylesheet" href="../tabSystem/style.css"
type="text/css" />
<script src="../jquery_latest.js" type="text/javascript"></script>
<script src="../tabSystem/script.js" type="text/javascript"></script>
</head>
<body>
<div id="tab_system"><!-- start of tab_system-->
<ul id="tab_bar">
<li>
<a href="#">Current Hits</a>
</li>
<li>
<a href="#">Our Favourites</a>
</li>
<li>
<a href="#">All Time</a>
</li>
</ul>
<ul id="current" class="tab_list">
<li>
<a href="javascript:void(0)">Who behind behind this | About us</a>
</li>
<li>
<a href="javascript:void(0)">HTML tutorials</a>
</li>
<li>
<a href="javascript:void(0)">Jquery Tutorials</a>
</li>
<li>
<a href="javascript:void(0)">Contact us if need</a>
</li>
</ul>
<ul id="favorite" class="tab_list">
<li>
<a href="javascript:void(0)"></a>
</li>
<li>
<a href="javascript:void(0)">this is our favorite post</a>
</li>
<li>
<a href="javascript:void(0)">Short Sale Info</a>
</li>
<li>
<a href="javascript:void(0)">Testimonials</a>
</li>
<li>
<a href="javascript:void(0)">Contact</a>
</li>
</ul>
<ul id="all_time" class="tab_list">
<li>
<a href="javascript:void(0)">Mortgage Forgiveness Debt Relief Act</a>
</li>
<li>
<a href="javascript:void(0)">5 Reasons to Hire Us</a>
</li>
<li>
<a href="javascript:void(0)">this is our favorite post</a>
</li>
<li>
<a href="javascript:void(0)">this is our fav post 2</a>
</li>
</ul>
</div><!-- end of tab_system-->
</body>
</html>
CSS2代码......
body{
font-family:Verdana;
font-size:13px;
}
ul{
padding:0;
margin:5px 0 0 0;
}
#tab_system{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
#tab_bar{
float:left;
}
#tab_bar li .running{
background:#fff;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
color:#000;
}
#tab_bar li{
list-style:none;
float:left;
}
#tab_bar li a{
padding:5px;
text-decoration:none;
background:#333;
border:#111;
color:#fff;
}
#tab_bar li a:nth-child(1),#tab_bar li a:nth-child(2){
margin-right:2px;
}
#tab_system .tab_list li{
list-style:none;
}
#tab_system .tab_list{
float:left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
min-width:260px;
}
#tab_system .tab_list li a{
padding:5px;
text-decoration:none;
display:block;
float:left;
clear:both;
}
#tab_system .tab_list li a:hover{
text-decoration:underline;
}
最后是jQuery代码......
//tab slider jquery code
$(document).ready(function(){//Default view
$('#current').show();
$('#tab_bar li:nth-child(1) a').addClass('running');
$('#favorite,#all_time').hide();
$('#tab_bar li:nth-child(1) a').click(function(event){//Fire when Current hit clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(2) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#current').slideDown(500);
$('#favorite,#all_time').hide();
});
$('#tab_bar li:nth-child(2) a').click(function(event){//Fire when All time clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#favorite').slideDown(500);
$('#current,#all_time').hide();
});
$('#tab_bar li:nth-child(3) a').click(function(event){//Fire when Favorite clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(2) a').removeClass('running');
$('#all_time').slideDown(500);
$('#favorite,#current').hide();
});
});
就是这样。 100％保证代码可以正常运行......谢谢...