Find active tab in ui-tabs in jquery 并改变颜色
Find active tab in ui-tabs in jquery and change color
当我单击选项卡时,必须更改 li 的颜色。我尝试把之前的activeclass去掉,把activeclass加到当前li里。但不工作。
<script>
$(document).ready(function () {
$('.Tabs').tabs();
});
$('#tabs ul li a').click(function(){
$(this).prev().find('li.Active').removeClass('Active');
$(this).find('li').addClass('Active');
});
</script>
我附上了 jsfiddle https://jsfiddle.net/0frr7qn2/6/
我在这里 fork 你的 jsfiddle:https://jsfiddle.net/g5t3xhj1/
有效,这是我所做的:
- 更新了您的 css 以在 a href 而不是 li
上激活 class
- 更新了您的 jQuery 以删除点击时所有活动的 classes 并将其添加回仅被点击的
HTML
<div class="Tabs">
<div id="tabs">
<ul>
<li>
<a class="active" href="#tab1">Information</a>
</li>
<li>
<a href="#tab2">Accounting</a>
</li>
<li>
<a href="#tab3">Tax Performance</a>
</li>
</ul>
</div>
<div id="tab1" class="tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2" class="tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3" class="tab" style="display:none">
<p>Tab 3 Content</p>
</div>
</div>
JS
$(document).ready(function() {
//Hide all Tabs on laod
$('.Tabs').tabs();
});
$('#tabs ul li a').click(function() {
$('#tabs ul li a').removeClass('active');
$(this).addClass('active');
});
CSS
li a.active {
color: red;
}
#tabs {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
border-right: white;
background-color: #002750;
color: white;
}
#tabs ul {
padding: 6px 0 24px;
margin: 0;
}
#tabs ul li {
list-style-type: none;
float: left;
margin: 0 30px;
cursor: pointer;
}
#tabs ul li.Active a {
color: #b32218;
}
#tabs {
display: block;
}
我认为您对 prev()
的功能有一点误解,它不会让您成为父级,而是跟随:
"Get the immediately preceding sibling..."
(jQuery docs)
您需要的是 parent()
,它将为您提供所点击元素的父元素(参见 docs) , combined with siblings()
(Docs) 它将为您提供所需的选项卡行为。
此外,我已将 outline: none
添加到 .#tabs ul li.Active a
,以删除活动选项卡的默认轮廓样式(如果要保留它,只需删除 [=36 中的注释行=]).
请参阅下面的代码段
$(document).ready(function() {
$('.Tabs').tabs();
});
$('#tabs ul li a').click(function() {
var $parent = $(this).parent();
$parent.siblings().removeClass('Active');
$parent.addClass('Active');
});
#tabs {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
border-right: white;
background-color: #002750;
color: white;
}
#tabs ul {
padding: 6px 0 24px;
margin: 0;
}
#tabs ul li {
list-style-type: none;
float: left;
margin: 0 30px;
cursor: pointer;
}
#tabs ul li.Active a {
color: #b32218;
outline: none; /* Remove this to leave the default outline functionality */
}
#tabs {
display: block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="Tabs">
<div id="tabs">
<ul>
<li class="Active">
<a href="#tab1">Information</a>
</li>
<li>
<a href="#tab2">Accounting</a>
</li>
<li>
<a href="#tab3">Tax Performance</a>
</li>
</ul>
</div>
<div id="tab1" class="Tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2" class="Tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3" class="Tab" style="display:none">
<p>Tab 3 Content</p>
</div>
</div>
我对您的 jQuery 进行了一些更正,以提供您想要的结果:
$('#tabs ul li').click(function(){
$(this).addClass('Active').siblings().removeClass('Active');
});
#tabs {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
border-right: white;
background-color: #002750;
color: white;
}
#tabs ul {
padding: 6px 0 24px;
margin: 0;
}
#tabs ul li {
list-style-type: none;
float: left;
margin: 0 30px;
cursor: pointer;
}
#tabs ul li.Active a {
color: #b32218;
}
#tabs {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Tabs">
<div id="tabs">
<ul>
<li class="Active">
<a href="#tab1">Information</a>
</li>
<li>
<a href="#tab2">Accounting</a>
</li>
<li>
<a href="#tab3">Tax Performance</a>
</li>
</ul>
</div>
<div id="tab1" class="Tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2" class="Tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3" class="Tab" style="display:none">
<p>Tab 3 Content</p>
</div>
</div>
我已将 代码 优化为尽可能短。由于 .Active
class 在 li
上,我已将 target 更改为 #tabs ul li
这样您就可以利用 .siblings()
方法 .
当我单击选项卡时,必须更改 li 的颜色。我尝试把之前的activeclass去掉,把activeclass加到当前li里。但不工作。
<script>
$(document).ready(function () {
$('.Tabs').tabs();
});
$('#tabs ul li a').click(function(){
$(this).prev().find('li.Active').removeClass('Active');
$(this).find('li').addClass('Active');
});
</script>
我附上了 jsfiddle https://jsfiddle.net/0frr7qn2/6/
我在这里 fork 你的 jsfiddle:https://jsfiddle.net/g5t3xhj1/
有效,这是我所做的:
- 更新了您的 css 以在 a href 而不是 li 上激活 class
- 更新了您的 jQuery 以删除点击时所有活动的 classes 并将其添加回仅被点击的
HTML
<div class="Tabs">
<div id="tabs">
<ul>
<li>
<a class="active" href="#tab1">Information</a>
</li>
<li>
<a href="#tab2">Accounting</a>
</li>
<li>
<a href="#tab3">Tax Performance</a>
</li>
</ul>
</div>
<div id="tab1" class="tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2" class="tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3" class="tab" style="display:none">
<p>Tab 3 Content</p>
</div>
</div>
JS
$(document).ready(function() {
//Hide all Tabs on laod
$('.Tabs').tabs();
});
$('#tabs ul li a').click(function() {
$('#tabs ul li a').removeClass('active');
$(this).addClass('active');
});
CSS
li a.active {
color: red;
}
#tabs {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
border-right: white;
background-color: #002750;
color: white;
}
#tabs ul {
padding: 6px 0 24px;
margin: 0;
}
#tabs ul li {
list-style-type: none;
float: left;
margin: 0 30px;
cursor: pointer;
}
#tabs ul li.Active a {
color: #b32218;
}
#tabs {
display: block;
}
我认为您对 prev()
的功能有一点误解,它不会让您成为父级,而是跟随:
"Get the immediately preceding sibling..." (jQuery docs)
您需要的是 parent()
,它将为您提供所点击元素的父元素(参见 docs) , combined with siblings()
(Docs) 它将为您提供所需的选项卡行为。
此外,我已将 outline: none
添加到 .#tabs ul li.Active a
,以删除活动选项卡的默认轮廓样式(如果要保留它,只需删除 [=36 中的注释行=]).
请参阅下面的代码段
$(document).ready(function() {
$('.Tabs').tabs();
});
$('#tabs ul li a').click(function() {
var $parent = $(this).parent();
$parent.siblings().removeClass('Active');
$parent.addClass('Active');
});
#tabs {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
border-right: white;
background-color: #002750;
color: white;
}
#tabs ul {
padding: 6px 0 24px;
margin: 0;
}
#tabs ul li {
list-style-type: none;
float: left;
margin: 0 30px;
cursor: pointer;
}
#tabs ul li.Active a {
color: #b32218;
outline: none; /* Remove this to leave the default outline functionality */
}
#tabs {
display: block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="Tabs">
<div id="tabs">
<ul>
<li class="Active">
<a href="#tab1">Information</a>
</li>
<li>
<a href="#tab2">Accounting</a>
</li>
<li>
<a href="#tab3">Tax Performance</a>
</li>
</ul>
</div>
<div id="tab1" class="Tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2" class="Tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3" class="Tab" style="display:none">
<p>Tab 3 Content</p>
</div>
</div>
我对您的 jQuery 进行了一些更正,以提供您想要的结果:
$('#tabs ul li').click(function(){
$(this).addClass('Active').siblings().removeClass('Active');
});
#tabs {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
border-right: white;
background-color: #002750;
color: white;
}
#tabs ul {
padding: 6px 0 24px;
margin: 0;
}
#tabs ul li {
list-style-type: none;
float: left;
margin: 0 30px;
cursor: pointer;
}
#tabs ul li.Active a {
color: #b32218;
}
#tabs {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Tabs">
<div id="tabs">
<ul>
<li class="Active">
<a href="#tab1">Information</a>
</li>
<li>
<a href="#tab2">Accounting</a>
</li>
<li>
<a href="#tab3">Tax Performance</a>
</li>
</ul>
</div>
<div id="tab1" class="Tab" style="display:none">
<p>Tab 1 Content</p>
</div>
<div id="tab2" class="Tab" style="display:none">
<p>Tab 2 Content</p>
</div>
<div id="tab3" class="Tab" style="display:none">
<p>Tab 3 Content</p>
</div>
</div>
我已将 代码 优化为尽可能短。由于 .Active
class 在 li
上,我已将 target 更改为 #tabs ul li
这样您就可以利用 .siblings()
方法 .