Question

我的jquery选项卡菜单有点问题，它运行良好，但我想要一些更改，我真的坚持我应该怎么做。我的jquery代码：

$(document).ready(function() {
    $(".tab_content").hide(); //Hide all content
    $("ul.tab-menu li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tab-menu li").click(function() {
        $("ul.tab-menu li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(600); //Fade in the active ID content
        return false;
    });
});

和我的HTML代码：

<ul class="tab-menu"> <!-- menu tabs start here -->
   <li><a href="#tab1">Lementések</a></li>
   <li class="active-tab"><a href="#tab2">Keresés</a></li>
</ul> <!-- menu tabs end here -->
<div class="tab_container"> <!-- tab menu content start here -->
   <ul id="tab1" class="tab_content"> <!-- first tab content start here -->
      <li>
    <a href="bevitel.php">Adatbevitel</a>
      </li>
      <li>
    <a href="keres_all.php">Lementett Adatok</a>
      </li>
   </ul> <!-- first tab content end here -->
   <ul id="tab2" class="tab_content"> <!-- second tab content start here -->
      <li class="selected">
    <a class="selected" href="bevitel.php">Gyűrűszám Keresés</a>
      </li>
      <li>
    <a href="keres_all.php">Keresés a Képek Közt</a>
      </li>
   </ul> <!-- second tab content end here -->
</div>

html代码中使用的类用于css样式格式化。我只是想我可以选择'手动'（在html代码中，哪个选项卡是活动的，并根据活动选项卡显示内容。换句话说，我想以某种方式首先查询jquery代码以查询哪个选项卡处于活动状态（我把它写进了html代码中。非常感谢你提前！

Answer 1

你的意思是这样吗 FIDDLE

<ul class="tab-menu">
 <li><a href="tab1">Lementések</a></li>
 <li class="active-tab"><a href="tab2">Keresés</a></li>
</ul>

<div class="tab_container">
  <ul id="tab1" class="tab_content">
    <li>
      <a href="bevitel.php">Adatbevitel</a>
    </li>
    <li>
      <a href="keres_all.php">Lementett Adatok</a>
    </li>
  </ul>
  <ul id="tab2" class="tab_content">
    <li class="selected">
      <a class="selected" href="bevitel.php">Gyűrűszám Keresés</a>
    </li>
    <li>
      <a href="keres_all.php">Keresés a Képek Közt</a>
    </li>
  </ul>
</div>

.active-tab {
  background: #ddd;
}
.tab_content {
  display: none;
}

$(function() {
  $('#'+$('.active-tab a').attr('href')).fadeIn(450);

  $('.tab-menu li a').click(function(e) {
    e.preventDefault();
    $(this).parent('li').addClass('active-tab').siblings('li').removeClass('active-tab');
    $('#'+$(this).attr('href')).fadeIn(450).siblings('ul').fadeOut(450);
  });
});

或使用HTML5数据属性而不是锚点

<ul class="tab-menu">
  <li data-rel="tab1">Lementések</li>
  <li data-rel="tab2" class="active-tab">Keresés</li>
</ul>

和

$('#'+$('.active-tab').data('rel')).fadeIn(450);
$('.tab-menu li').click(function() {
  $(this).addClass('active-tab').siblings('li').removeClass('active-tab');
  $('#'+$(this).data('rel')).fadeIn(450).siblings('ul').fadeOut(450);
});

Answer 2

检查其他解决方案

<强> DEMO

<强>的jQuery

$(document).ready(function () {
    $(".tab_content").hide(); //hide All content
    var defaultActive = $(".tab-menu li.active-tab a").attr("href"); //store active href default value
    $(defaultActive).show();

    $(".tab-menu li a").click(function (e) {
        e.preventDefault();
        $("ul li").removeClass("active-tab");
        var related = $(this).attr("href"); //store href value
        $(this).parent().addClass("active-tab");
        if ($(this).parent().hasClass("active-tab")) {
            $(".tab_content").hide();
            $(related).show();
        }
    })

});

jQuery选项卡菜单

2 个答案: