Jquery选项卡无法正常工作

Question

在菜单＆＃34;我们的工作＆＃34;，点击标签＆＃34; Title1,2＆＃34;标签菜单正在隐藏。我做错了什么？

JSfiddle

的完整代码

Jquery的：

$(function () {
    var tabs = $('.tabs');
    $('.tab').hide();
    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");
        };
    });
});

Answer 1

通过检查CSS，您将不必要地复杂化。你可以做这样简单的事情（请单独查看 jQuery代码）：

$(function () {
  $('ul.tabs li:first-child').addClass('active');
  $('.block article').hide();
  $('.block article:first-child').show();
  $('ul.tabs li').on('click', function () {
    $(this).closest(".tabs").find("li").removeClass('active');
    $(this).addClass('active')
    $('.block article').hide();
    var activeTab = $(this).find('a').attr('href');
    $(activeTab).show();
    return false;
  });
});

@import url("http://getbootstrap.com/dist/css/bootstrap.min.css");
.wrapper {
  background: white;
  margin: auto;
  padding: 0em;
  width: 100%;
}
ul.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.tabs li {
  border: gray solid 1px;
  border-bottom: none;
  float: left;
  margin: 0 .25em 0 0;
  padding: .25em .5em;
}
ul.tabs li a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
ul.tabs li.active {
  background: #2fa4e7;
}
ul.tabs li.active a {
  color: white;
}
.clr {
  clear: both;
  width: 100%;
}
article {
  border-top: gray solid 1px;
  padding: 0 0em;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row" id="dvMain">
    <form method="post" id="SearchForm" class="form-horizontal">
      <div class="col-sm-12 col-md-6 col-lg-6">
        <div class="panel panel-primary" id="divSearch">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#collapseSearch">
                Student Search
              </a>
            </h4>
          </div>
          <div id="collapseMainSearch" class="panel-body panel-collapse collapse in">
            <section class="wrapper">
              <ul class="tabs">
                <li id="first"><a href="#MainS">Main Search</a></li>
                <li><a href="#ACSS">Academic Search</a></li>
                <li><a href="#AttS">Attendance Search</a></li>
              </ul>
              <div class="clr"></div>
              <section class="block">
                <article id="MainS">
                  Main search
                </article>
                <article id="ACSS">
                  Academic serach
                </article>
                <article id="AttS">
                  Attendance serach
                </article>
                <article id="StaS">
                  status serach
                </article>
              </section>
            </section>
          </div>
        </div>


      </div>
      <div id="divSecondPanel" class="col-sm-12 col-md-6 col-lg-6">

        <div class="panel panel-primary" id="divDashboard">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#collapseDashboard">
                Dashboard
              </a>
            </h4>
          </div>

          <div id="collapseDashboard" class="panel-body panel-collapse collapse in">
            <section class="wrapper">
              <ul class="tabs">
                <li id="second"><a href="#tab1">Students by Division</a></li>
                <li><a href="#tab2">Students by Campus</a></li>
                <li><a href="#tab3">Students by Level</a></li>
              </ul>
              <div class="clr"></div>
              <section class="block">
                <article id="tab1">
                  division
                </article>
                <article id="tab2">
                  campus
                </article>
                <article id="tab3">
                  level
                </article>
              </section>
            </section>
          </div>
        </div>
        </form>
      </div>
  </div>