javascript - 选项卡系统 : JS Slide Up on current tab-6ren

javascript - 选项卡系统 : JS Slide Up on current tab

转载作者：行者123 更新时间：2023-11-28 03:49:41

当您选择选项卡时，我试图使选项卡内的内容向上滑动。因此，当您单击某个选项卡时，该选项卡内的文本将从底部向上滑动。

$(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 中做什么来实现这个功能？正确的代码和解释将不胜感激!

最佳答案

这是一个很好的问题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();
    });
});