[英]I am unable to get the parent element of the anchor tag
HTML code: HTML代码:
<ul class="nav nav-tabs">
<li role="presentation" id="tab1" class="active"><a onclick="switchTabs(1)">Tab1</a></li>
<li role="presentation" id="tab2"><a onclick="switchTabs(2)">Tab2</a></li>
</ul>
JS code: no error occurred while clicking, but not do switching JS代码:单击时未发生错误,但未进行切换
function switchTabs(idx) {
// this is not working
var $li = $(this).parent();
if($li.hasClass('active')) {
return false; // not enter here
}
$li.removeClass('active');
if (idx === 1) {
$li.next().addClass('active');
} else {
$li.prev().addClass('active');
}
// but this works while using id selector
/*if (idx === 1) {
$("#tab1").addClass('active');
$("#tab2").removeClass('active');
} else if(idx === 2) {
$("#tab2").addClass('active');
$("#tab1").removeClass('active');
}*/
return false;
}
What can be the reason? 可能是什么原因?
Try this approach I think that will be better solution for your case 尝试这种方法,我认为这将是针对您的案例的更好解决方案
<html> <head> <meta charset="utf-8"/> </head> <style> .active { color: red; } </style> <body> <ul class="nav nav-tabs"> <li role="presentation" id="tab1" class="active"><a onclick="switchTabs(this)">Tab1</a></li> <li role="presentation" id="tab2"><a onclick="switchTabs(this)">Tab2</a></li> </ul> </body> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <script> function switchTabs(elm) { var $li = $(elm).parent(); if(!$li.hasClass('active')) { $li.addClass('active'); $li.siblings().removeClass('active'); } } </script>
Send the element into the function, and then you will have it's parent: 将元素发送到函数中,然后您将拥有它的父元素:
<a onclick="switchTabs(this,1)">
and then 接着
function switchTabs(elm,idx) {
// this is not working
var $li = $(elm).parent();
// Rest of your code...
Check this method to make it easier (and use the $(this)
) 检查此方法以使其更容易(并使用
$(this)
)
$(document).on('click','.nav li a', function(){ let tab = $(this).data('tab');//$(this) is the a clicked. $('.nav li.active').removeClass('active');//hide active Tab $('.nav li#tab'+tab).addClass('active');//show Tab })
.active{font-size:20px;color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav nav-tabs"> <li role="presentation" id="tab1" class="active"><a data-tab="1">Tab1</a></li> <li role="presentation" id="tab2"><a data-tab="2">Tab2</a></li> </ul>
You are passing only index and not this object to switchTab function. 您仅将索引而不是该对象传递给switchTab函数。 You can make use of idx to get the clicked li and then put logic to add / remove active class.
您可以使用idx来获取单击的li,然后使用逻辑来添加/删除活动类。
See code below 见下面的代码
function switchTabs(idx) { // this is not working //var $li = $(this).parent(); -- you are not passing this anywhere in the function hence it is not getting $('li').removeClass('active'); // remove all active var $li = $('#tab' + idx).addClass('active'); // use idx to create tab id of clicked li and add active class }
.active { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <ul class="nav nav-tabs"> <li role="presentation" id="tab1" class="active"><a onclick="switchTabs(1)">Tab1</a></li> <li role="presentation" id="tab2"><a onclick="switchTabs(2)">Tab2</a></li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.