創建一個標籤，但不會對click - jQuery問題/新手

Question

我的網站建設者有一個通用的選項卡功能，但我不喜歡它，所以我想我會學習如何建立一個自己。我比現在的腳本更適合使用CSS，並且它顯示了我創建的內容，它看起來如何我想要的，但對於點擊還沒有起作用。

這裏是的jsfiddle：https://jsfiddle.net/6oq3t9ev/1/

<ul class="tab_conts" id="recent" style="display: block;"> 
    <li class="tab_cont"> 
    <a href="/test" class="tab_cont_link">Test</a> 
    <a> 
     <desc>Testing</desc> 
    </a> 
    </li> 
    <li class="tab_cont"> 
    <a href="/test" class="tab_cont_link">Test</a> 
    <a> 
     <desc>Testing</desc> 
    </a> 
    </li> 
</ul> 

<ul class="tab_conts" id="new" style="display: none;"> 
<li class="tab_cont"> 
    <a href="/test" class="tab_cont_link">Test</a> 
    <a> 
     <desc>Testing</desc> 
    </a> 
    </li> 
    <li class="tab_cont"> 
    <a href="/test" class="tab_cont_link">Test</a> 
    <a> 
     <desc>Testing</desc> 
    </a> 
    </li> 
    <li class="tab_cont"> 
    <a href="/test" class="tab_cont_link">Test</a> 
    <a> 
     <desc>Testing</desc> 
    </a> 
    </li> 
</ul> 

$(document).on("ready int:ready", function() { 
var e = $(".tab_name"), 
    t = $(".tab_conts").hide(); 
e.prependTo(".tabs-cn"), e.click(function(n) { 
    n.preventDefault(); 
    var i = $(this), 
    r = e.index(i); 
    e.removeClass("tab_name-active"), i.addClass("tab_name-active"), t.hide().eq(r).show() 
}), e.first().click() }) 

Answer 1

像這樣的東西應該做的伎倆：

$(document).ready(function(){ $('.tab_name').on('click',function(){ var href = $(this).attr('href'); $('.tab_conts').css({'display':'none'}); $(href).css({'display':'block'}) }); });

PS。確保你包含jquery在你的腦海中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>