单击后，Jquery选项卡消失

时间：2015-09-22 07:49:46

标签： jquery

点击＆＃34;我们的工作＆＃34;然后在Title1,2,3标签消失，相同的脚本用于第一个标签（链接），工作正常。我做错了什么？

Jsfiddle

的完整代码 
$(function() {

var tabs = $('.tabs');


tabs.find('a').on('click', function(e) {
    e.preventDefault();
    tabs.find('.active').removeClass('active');
    $(this).addClass('active');
    $(this.hash).show().siblings().hide();
}).first().click();





//Show Menu
$('#show-about-btn').click(function() {
    $('#show-about-btn').html("▼");
    if($('.menu-nav').css('display')=='none') {
        $('.menu-nav').slideDown("fast");
    } else {
        $('.menu-nav').slideUp("fast");
        $('#show-about-btn').html("▲");
    };
});

$(".our-work").click(function() {
    if($('.work-wrap').css('display')=='none') {
        $(".work-wrap").slideDown("fast");
    } else {
        $(".work-wrap").slideUp("fast");
    };
});

});

2 个答案:

答案 0 :(得分：3)

问题是您隐藏了tab元素的所有兄弟，其中包含subnav元素，因此您需要隐藏当前标签的所有其他tab兄弟。

＆＃13;
＆＃13; 
$(function() {

  var tabs = $('.tabs');


  tabs.find('a').on('click', function(e) {
    e.preventDefault();
    tabs.find('.active').removeClass('active');
    $(this).addClass('active');
    $(this.hash).show().siblings('.tab').hide();
  }).first().click();





  //Show Menu
  $('#show-about-btn').click(function() {
    $('#show-about-btn').html("▼");
    if ($('.menu-nav').css('display') == 'none') {
      $('.menu-nav').slideDown("fast");
    } else {
      $('.menu-nav').slideUp("fast");
      $('#show-about-btn').html("▲");
    };
  });

  $(".our-work").click(function() {
    if ($('.work-wrap').css('display') == 'none') {
      $(".work-wrap").slideDown("fast");
    } else {
      $(".work-wrap").slideUp("fast");
    };
  });

});
＆＃13; 
body {
  background-color: #E5E5E5;
}
a:link {
  text-decoration: none !important;
}
.title {
  margin-top: 150px;
  font-size: 450%;
  font-weight: bold;
  letter-spacing: 3px;
  margin-left: 10px;
  border-bottom: 1px solid #ccc;
}
.title a,
.title a:visited,
.title a:link {
  color: black;
}
.title a:hover {
  color: #2bb673;
}
#show-about-btn {
  font-size: 40%;
  margin-left: 10px;
  color: #2bb673;
}
/*Navigation*/

.subnav {
  min-height: 40px;
  border-bottom: 1px solid #ccc;
}
.subnav li {
  list-style: none;
  float: left;
  padding: 0px 40px 1px 1px;
  position: relative;
  bottom: 15px;
}
.subnav ul li a.active {
  padding: 6px;
  background-color: #2bb673;
  color: #fff;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  text-decoration: none;
}
.subnav li a {
  color: #2bb673;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  position: relative;
  right: 30px;
  top: 15px;
}
.subnav a:hover {
  color: black;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
}
article {
  font-size: 16px;
  font-family: arial, sans-serif;
  border-bottom: 1px solid #ccc;
}
.tab {
  position: relative;
  top: 10px;
  font-size: 12px;
  display: block;
}
.menu-nav {
  display: none;
}
.tab p,
h5 {
  padding-bottom: 25px;
}
.tab h4 {
  margin-top: 5px;
  font-weight: bold;
}
.tab h5 {
  font-size: 18px;
}
.tab img {
  margin-left: 50px;
  margin-bottom: 10px;
}
/*Content*/

.our-work a {
  font-family: "Literaturnaya Italic";
  font-style: italic;
  font-weight: 400;
  font-size: 46px;
  margin-top: 5px;
  color: black;
}
.our-work {
  border-bottom: 1px solid #ccc;
}
.our-work a:active {
  color: #2bb673;
  text-decoration: none;
}
.our-work a:hover {
  color: #2bb673;
  text-decoration: none;
}
.our-work a:focus {
  color: #2bb673;
  text-decoration: none;
}
.work-wrap {
  display: none;
}
#thumbnail {
  cursor: pointer;
}
#thumbnail:hover {
  -webkit-filter: grayscale(70%);
  -mozkit-filter: grayscale(70%);
  filter: grayscale(70%);
}
.tab_2 h3 {
  text-align: center;
}
.tab_2 {
  margin-top: 20px;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <header>
        <h1 class="title"><a href="#">Link</a><a href="#" id="show-about-btn">&#9650;</a></h1>

      </header>
      <div class="menu-nav">
        <nav class="subnav">
          <ul class="tabs">
            <li><a href="#portfolio" class="active">Portfolio</a>
            </li>
            <li><a href="#about_us">About Us</a>
            </li>
            <li><a href="#contact_us">Contact Us</a>
            </li>
          </ul>
        </nav>
        <div class="sub-content">
          <article>
            <div class="tab" id="portfolio">
              <div class="row">
                <div class="col-md-12">
                  <h5>1.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5>

                </div>
              </div>
            </div>
            <div class="tab" id="about_us">
              <div class="row">
                <div class="col-md-3">
                  <img src="img/about_multi.gif" alt="">
                  <h4>We Are Multi-Disciplinary</h4>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p>
                </div>
                <div class="col-md-3">
                  <img src="img/about_innovative.gif" alt="">
                  <h4>We Are Multi-Disciplinary</h4>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p>
                </div>
                <div class="col-md-3">
                  <img src="img/about_creative.gif" alt="">
                  <h4>We Are Multi-Disciplinary</h4>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p>
                </div>
                <div class="col-md-3">
                  <img src="img/about_serious.gif" alt="">
                  <h4>We Are Multi-Disciplinary</h4>

                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic consequatur voluptatum illum commodi, possimus culpa incidunt vero repudiandae neque quas, rerum quis, consequuntur illo molestiae necessitatibus ea explicabo architecto impedit!</p>
                </div>
              </div>
            </div>
            <div class="tab" id="contact_us">
              <div class="row">
                <div class="col-md-4">
                  <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5>

                </div>
                <div class="col-md-4">
                  <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5>

                </div>
                <div class="col-md-4">
                  <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, nisi quidem saepe, minus qui amet officiis voluptatum odio maiores sunt blanditiis nostrum eum. Animi placeat aut magni, quo magnam harum.</h5>

                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
  <div class="content">
    <div class="our-work">	<a href="#">Our Work</a>

    </div>
    <div class="work-wrap">
      <nav class="subnav">
        <ul class="tabs">
          <li><a href="#title-1" class="active">Title 1</a>
          </li>
          <li><a href="#title-2">Title 2</a>
          </li>
          <li><a href="#title-3">Title 3</a>
          </li>
        </ul>
      </nav>
      <div class="tab" id="title-1">
        <article>
          <div class="row">
            <div class="col-md-4">
              <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
              <h3>Title 1</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
            </div>
            <div class="col-md-4">
              <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
              <h3>Title</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
            </div>
            <div class="col-md-4">
              <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
              <h3>Title</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
            </div>
            <div class="col-md-4">
              <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
              <h3>Title</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
            </div>
            <div class="col-md-4">
              <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
              <h3>Title</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
            </div>
            <div class="col-md-4">
              <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
              <h3>Title</h3>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
            </div>
          </div>
      </div>
      <div class="tab" id="title-2">
        <div class="row">
          <div class="col-md-4">
            <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
            <h3>Title</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
          </div>
          <div class="col-md-4">
            <img src="img/1.jpg" alt="" class="img-thumbnail img-responsive" id="thumbnail">
            <h3>Title</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit nihil vero qui vel ducimus recusandae dolores numquam voluptates beatae molestiae tenetur, voluptatem inventore non hic aspernatur sit tempore quod dicta?</p>
          </div>
        </div>
      </div>
      </article>
    </div>
  </div>
</div>
<!--Container-->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

更换 $(this.hash).show().siblings().hide(); 与

$('.tab').hide(); $(this.hash).show();

会做的伎俩

相关问题
最新问题