Demo...

Question

我尝试为标签菜单编写代码，但是很有用。在代码中是错误的。我尝试修复代码但没有结果。

的javascript：

var tabActive = $(".active").attr('id');
var c=$('a').click(function() {

  $(this).find("div.noactive").removeClass("noactive").addClass("active");
  $(this).find("div"+tabActive).removeClass("active").addClass("noactive");

    var bb = $(this).find("div"+tabActive);
    var b = $(this).attr("class");

      $(".ho").removeClass('ho');
});

HTML：

<div id="tabs-wrapper">
  <a  href="#1" class="ho">
     <div id="tab1" class="noactive" >1</div>
  </a>
  <a href="#2" class="">
     <div id="tab2" class="active">2</div>
  </a>
  <a href="#3" class="ho">
     <div id="tab3" class="noactive">3</div>
  </a>
  <a href="#4" class="ho">
     <div id="tab4" class="noactive">4</div>
  </a>
  <a href="#5"class="ho">
     <div id="tab5" class="noactive">5</div>
  </a>

  <div style="clear:both;"></div>
  <div id="tab-content">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
  </div>
</div>

http://jsfiddle.net/dimaomni/Q2XST/1/

Answer 1

一些好的旧时尚jQuery链接怎么样....

var c = $('a').click(function () {
  $(this).find('div').add('.active')
    .toggleClass("noactive").toggleClass("active")
    .closest('a').toggleClass('ho');
});

Demo...

Answer 2

javascript是事件驱动的，所以：

$('a').on({
  click: function(e) {
    e.preventDefault();  // stops it from default action
    var showTab = $(this).attr("href"); // gets the href as identifier
    $('.active').removeClass("active"); // removed previous active link
    $(this).addClass("active"); // adds .active to clicked <a>
    $('.tab-content:visible').hide();  // hides visible tab
    $(showTab).show();  // shows active tab
  }
});

对于html，您不应该将块元素添加到内联元素中，例如或。它应该是这样的：

<div class="controller">
  <a href="#tab1" class="active">Tab 1</a>
  <a href="#tab2">Tab 2</a>
  <a href="#tab3">Tab 3</a>
</div>

<div class="tabs">
  <div id="tab1" class="tab-content">...</div>
  <div id="tab2" class="tab-content">...</div>
  <div id="tab3" class="tab-content">...</div>
</div>

jQuery选项卡菜单。在标签之间切换

2 个答案:

Demo...