jquery - 使用 jquery 的选项卡不起作用

Question

我正在尝试在 jQuery 中创建一个选项卡，当单击该选项卡时没有任何反应，但 url 发生变化，就好像该选项卡已被单击一样。不知道会出什么问题。有人知道这是行不通的吗？

$(function() {
	jquery('.tabs .mytabs a').on('click', function(event) {
		var currentAttrValue = jquery(this).attr('href');
    jquery('.mytabs' + currentAttrValue).show().siblings().hide();
    jquery(this).parent('li').addClass('active').siblings().removeClass('active');
    event.preventDefault();
  });
});

#tabs {
  width:100%;
  display:inline-block;
}
/* Clearfix */
.mytabs:after {
  display:block;
  clear:both;
  content:'';
}
.mytabs li {
  margin:0px 5px;
  float:left;
  list-style:none;
}
.mytabs a {
  padding:9px 15px;
  display:inline-block;
  border-radius:3px 3px 0px 0px;
  background:#7FB5DA;
  font-size:16px;
  font-weight:600;
  color:#4c4c4c;
  transition:all linear 0.15s;
}
.mytabs a:hover {
  background:#a7cce5;
  text-decoration:none;
}
li.active a, li.active a:hover {
  background:#fff;
  color:#4c4c4c;
}
.tab-content {
  padding:15px;
  border-radius:3px;
  box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
  background:#fff;
}
.tabs {
  display:none;
}
.tabs.active {
  display:block;
}    

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

 <div id="tabs">
   <ul class="mytabs">
    <li class="active"><a href="#yoursaved">Your History</a></li>
    <li><a href="#yourdetails">Your Details</a></li>
    <li><a href="#yourcar">Your Car</a></li>
   </ul>
</div>
<div id="tab">
  <div id="yoursaved" class="tab-content">
    <p>tab 1</p>
  </div>
	<div id="yourdetails" class="tabs">
    <p>tab 2</p>
  </div>
  <div id="yourcar" class="tabs">
    <p>tab 3</p> 
  </div>

更新

它们现在在单击选项卡时显示信息，但是当单击它们时，唯一出现的是单词“选项卡 2”或“选项卡 3”，其他任何内容都不会出现，甚至选项卡也不会出现。很困惑，知道这是为什么吗？

第二次更新

加载页面时，所有选项卡信息都显示在彼此下方，知道这是为什么吗？

Answer 1

这里有一些小问题，但特别是:

jQuery('.tabs .mytabs a').on('click', function(event) {

tabs 是一个 id 而不是一个类，所以它应该是

jQuery('#tabs .mytabs a').on('click', function(event) {

工作中的 fiddle HERE

另一件错误的事情是这一行:

jquery('.mytabs' + currentAttrValue).show().siblings().hide();

您尝试显示的元素不存在于 .mytabs 中，它们存在于 #tab 中，我认为您甚至不需要使用。试试看:

$(currentAttrValue).show().siblings().hide();

这将与您保存在链接 href attr 中的 ID 一起使用

编辑(从评论中添加):

标签背景不显示的原因实际上是css和html相关的。试试这个:

<div id="tab">
  <div id="yoursaved" class="tab-content active">
    <p>tab 1</p>
  </div>
  <div id="yourdetails" class="tab-content">
    <p>tab 2</p>
  </div>
  <div id="yourcar" class="tab-content">
    <p>tab 3</p>
  </div>
</div> //this was missing from init code also

删除这个CSS:

.tabs {
  display: none;
}

.tabs.active {
  display: block;
}

然后这样做:

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
  display:none;
}

.tab-content.active {
  display: block;
}