0

私の問題は、私が書いた 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>
4

2 に答える 2

3

jQuery オブジェクトが空です。セレクターを見てください。

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

activeTab属性はhrefセレクターでも DOM 要素でもありませんが、なぜ機能するのでしょうか...?

于 2012-10-16T01:40:55.060 に答える
1

Your code basically will work once you fix mismatch of class name tab_content vs tabs_content and include href in your A tags. There currently is no href for code to lookup

The href needs to be in format "#idValue"

I made these 2 changes and here is working demo

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

于 2012-10-16T02:02:33.373 に答える