我的jquery不起作用

我正在創建一個wordpress站點，其中有設計選項卡。我希望當我點擊第一個標籤時，它應該顯示id = tab1的div的內容。我的jquery不起作用

而當我點擊第二個標籤時，它應該顯示id = tab2的div的cotent。

但沒有任何工作。

這是我的jQuery代碼。

$(document).ready(function() { 
    //Hide all content 
    $(".tab_content").hide(); 
    //Activate first tab 
    $(".tabs_links ul li:first").addClass("active").show(); 
    //Show first tab content 
    $(".tab_content:first").show(); 
    //On Click Event 
    $(".tabs_links ul li").click(function() { 
     //Remove any "active" class 
     $(".tabs_links ul li").removeClass("active"); 
     //Add "active" class to selected tab 
     $(this).addClass("active"); 
     //Hide all tab content 
     $(".tab_content").hide(); 
     //Find the rel attribute value to identify the active tab + content 
     var activeTab = $(this).find("a").attr("href"); 
     //Fade in the active content 
     $(activeTab).fadeIn(); 
     return false; 
    }); 
});

這是我的html代碼。

<div class="tabs_links"> 
    <ul> 
     <li><a href="#tab1">News and Events</a></li> 
     <li><a class="nobg" href="#tab4">Blog</a></li> 
    </ul> 
</div> 
<div style="display: none;" id="tab1" class="tab_content"> 
    content of first tab 
</div> 
<div style="display: none;" id="tab4" class="tab_content"> 
    content of second tab 
</div>

我不知道是什麼問題。有誰知道解決方案？

來源

2012-01-19 Ahmad

爲什麼不使用jQueryUI的標籤...：http://jqueryui.com/demos/tabs/ –

代碼似乎工作得很好：http://jsfiddle.net/gion_13/MeMZv/。也許你沒有設置一些腳本引用。 –

在這裏，你需要做一些CSS的東西:)工作測試頁面代碼：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<style> 
.tabs_links ul li{display:inline;} 
a{text-decoration:none;color:black;} 
.active{background-color:#CECECE;} 
.tab_content{margin-left:30px;border:1px dotted black;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(".tab_content").hide(); 
$(".tabs_links ul li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

    $(".tabs_links ul li").click(function() { 
      $(".tabs_links ul li").removeClass("active"); 
      $(this).addClass("active"); 
      $(".tab_content").hide(); 
      var activeTab = $(this).find("a").attr("href"); 
      $(activeTab).fadeIn(); 
      return false; 
    }); 

}); 
</script> 
</head> 
<body> 
<div class="tabs_links"> 
      <ul> 
       <li><a href="#tab1">News & Events</a></li> 
       <li><a class="nobg" href="#tab4">Blog</a></li> 
      </ul> 
      </div> 
<div style="display: none;" id="tab1" class="tab_content"> 
First First First First First First 
</div> 
<div style="display: none;" id="tab4" class="tab_content"> 
Second Second Second Second Second Second 
</div> 
</body> 
</html>

來源

2012-01-19 12:36:38

我檢查了你的代碼，它在創建一個新的html頁面時工作正常。但在wordpress中它並不奏效。我在index.php上顯示了所有這些信息 – Ahmad

讓我調試你的工作頁面。 wordpress網站的鏈接是什麼？ –

它的本地主機:( – Ahmad

您的代碼運作良好。

我認爲，問題是你的瀏覽器或jQuery插件

使用jQuery 1.4.2插件

來源

2012-01-19 12:41:04 Kishor

我使用了'但沒有工作。 – Ahmad

轉到此地址並檢查您的代碼http://jsfiddle.net/9rBdx/ – Kishor

我的jquery不起作用

回答

相關問題