其他选项卡上的隐藏 bxslider

Question

我对 bxslider 有疑问。

检查一下here

当您打开另一个选项卡时 bxslider 内容会消失。为什么会这样？如何修复这个错误？

$(document).ready(function(){
    $('.tabs_menu a').click(function(e) {
        e.preventDefault();

        var tab = $(this).attr('href');
        $('.tab').not(tab).css({'display':'none'});

        $(tab).fadeIn(400);  
        $('.bxslider').bxSlider();
    });

});

body {
 font-family: "Arial", sans-serif;
 font-size: 16px;
}
.switches {
 height: 43px;
 width: 100%;
  background: #ffc578; /* Old browsers */
  background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}
.switches_descr ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
.switches ul li {
 display: inline-block;
}
.switches a {
 color: #fff;
 padding: 10px 84px 10px 84px;
  display: block;
}
#tab2, #tab3, #tab4 {
    display: none;
}
.options {
  margin-bottom: 50px;
}
.options .bxslider li {
  color: #3b52a0;
  font-style: italic;
  font-size: 15px;
}
.bxslider .options_ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.bx-viewport{
  height: 600px !important;
}
.bxslider li {
  width: 3.11% !important;
}

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="ru" class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="ru" class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
 <meta charset="utf-8" />
 <title>Заголовок</title>
 <meta name="description" content="" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
 <link rel="stylesheet" href="css/main.css" />
</head>
<body>
<section class="switches hidden-xs">
 <div class="container">
  <div class="row">
   <div class="col-md-12">
    <nav class="switches_descr">
     <ul class="tabs_menu">
      <li><a href="#tab1">1</a></li>
      <li><a href="#tab2">2</a></li>
      <li><a href="#tab3">3</a></li>
     </ul>
    </nav> 
   </div>
  </div>
 </div>
</section>
<section class="intro tab" id="tab1">
 <section class="options">
  <div class="container">
   <div class="row">
    <div class="col-md-12">
     <div class="slider">
      <ul class="bxslider">
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolore accusamus natus possimus incidunt, quo voluptatem eos obcaecati ut aliquam.</p></li>
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime odio quasi voluptate, molestiae debitis placeat praesentium blanditiis consequatur tempora architecto, ullam ad ratione sapiente. Saepe!</p></li>
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus tempore ipsum illo perspiciatis ex maxime qui doloribus, repudiandae eveniet natus molestiae, officia veniam voluptatem, ducimus.</p></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </section>
</section>
<section class="business_sol tab" id="tab2">
 <section class="options">
  <div class="container">
   <div class="row">
    <div class="col-md-12">
     <div class="slider">
      <ul class="bxslider">
       <li style="width: 100%"><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolore accusamus natus possimus incidunt, quo voluptatem eos obcaecati ut aliquam.</p></li>
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime odio quasi voluptate, molestiae debitis placeat praesentium blanditiis consequatur tempora architecto, ullam ad ratione sapiente. Saepe!</p></li>
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus tempore ipsum illo perspiciatis ex maxime qui doloribus, repudiandae eveniet natus molestiae, officia veniam voluptatem, ducimus.</p></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </section>
</section>

<section class="embedded tab" id="tab3">
 <section class="options">
  <div class="container">
   <div class="row">
    <div class="col-md-12">
     <div class="slider">
      <ul class="bxslider">
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolore accusamus natus possimus incidunt, quo voluptatem eos obcaecati ut aliquam.</p></li>
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime odio quasi voluptate, molestiae debitis placeat praesentium blanditiis consequatur tempora architecto, ullam ad ratione sapiente. Saepe!</p></li>
       <li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus tempore ipsum illo perspiciatis ex maxime qui doloribus, repudiandae eveniet natus molestiae, officia veniam voluptatem, ducimus.</p></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </section>
</section>
 <!--[if lt IE 9]>
 <script src="libs/html5shiv/es5-shim.min.js"></script>
 <script src="libs/html5shiv/html5shiv.min.js"></script>
 <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
 <script src="libs/respond/respond.min.js"></script>
 <![endif]-->
 <script src="http://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
 <script src="js/common.js"></script>
    <script>
  $(document).ready(function(){
   $('.bxslider').bxSlider();
  });
    </script>
</body>
</html>

Answer 1

添加这个css。

.bx-viewport{
    height:75px !important;
}

并在common.js中添加这个js。

        $(document).ready(function(){
            $('.tabs_menu a').click(function(e) {
                e.preventDefault();

                $('.bxslider').bxSlider();

                var tab = $(this).attr('href');
                $('.tab').not(tab).css({'display':'none'});

                $(tab).fadeIn(400);  

            });

        });

其他选项卡上的隐藏 bxslider

Hidden bxsliders on other tabs

jquery

html

css

bxslider