Javascript標簽數據，單擊即可顯示

Question

我的問題是我無法使用我編寫的JavaScript來顯示我的數據標簽。 它會在頁面加載時顯示（默認操作），但是當我使用導航時將不顯示任何tab_content。

Javascript

$(document).ready(function() {

  //Default Action

  $(".tab_content").hide(); //Hide all content
  $("dl.tabs dd:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("dl.tabs dd").click(function(event) {
    event.preventDefault();
      $("dl.tabs dd").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 rel attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active content
      return false;
  });
});

HTML

<div class="six columns">
  <div class="panel">
    <dl class="nice vertical tabs">
        <dd><a id="(dynamic id)">(tab name)</a><dd>
        <dd><a id="(dynamic id)">(tab name)</a><dd>
        <dd><a id="(dynamic id)">(tab name)</a><dd>
    </dl>
  </div>
</div>

<div class="six columns">
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
    <div id="(dynamic id)" class="panel tabs_content">
      ...
    </div>
</div>

Answer 1

您的jQuery對象為空，請查看它的選擇器：

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(); //Fade in the active content

activeTab是href屬性，而不是選擇器或DOM元素，為什么要起作用...？

Answer 2

一旦您解決了類名tab_content與tabs_content不匹配，並在A標記中包含了href，您A代碼就基本上可以正常工作了。 當前沒有href可用來查找代碼

href必須采用“ #idValue”格式

我進行了這2項更改，此處正在演示

http://jsfiddle.net/WFW6k/1/