Question

我正在尝试在jQuery中创建一个选项卡，当单击选项卡时没有任何反应，但是url更改，就好像已单击选项卡一样。不知道什么可能是错的。任何人都知道这不起作用吗？

＆＃13;

$(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();
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

更新

现在，他们会在单击选项卡时显示信息，但单击选项卡时，唯一显示的是单词＆＃34; tab 2＆＃34;或＆＃34;标签3＆＃34;没有别的东西甚至没有标签。如此困惑，任何想法为什么会这样？

第二次更新

加载页面时，所有标签信息都会显示在彼此之下，不知道为什么会这样？

Answer 1

以下是工作示例，您无法使用关键字window.parent.and_what_now???。它是jquery或jQuery符号：

＆＃13;

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

＆＃13;

#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;
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
}
.tabs.active {
  display: block;
}

＆＃13;

控制台输出只是为了查看currentAttrValue

Answer 2

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

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

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

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

工作小提琴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;
}

Answer 3

您在选择器中写.tab，它应该是#tab。它的工作正常，看看：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

<强> Fiddle demo

使用jquery的标签不起作用

3 个答案: