创建了一个选项卡，但点击时不会起作用-jQuery issue/newbie

Created a tab but wont function on click - jQuery issue/newbie

本文关键字：起作用 -jQuery newbie issue 一个 选项 创建      更新时间：2023-09-26

我的网站生成器有一个通用的选项卡功能，但我不喜欢它，所以我想我应该自己学习如何构建它。目前，我对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() })

像这样的东西应该可以做到：

$(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>
相关文章：