Question

我需要添加＆＃39; selectedTab＆＃39;上课并删除＆＃39; notSelectedTab＆＃39;对所点击的标签添加课程，然后添加“未选择的标签”＆＃39;类到所有其他选项卡式面板。目前，该脚本为所有点击的标签提供了“选择标签”。上课，我很感激指导我正确的方向。如果我能提供其他任何信息，请告诉我。

<style>
/*Selected Tab*/
.selectedTab {
    background-color:#CBD8E1;;
    border-left: 1px solid rgb(69, 145, 193);
    border-top: 1px solid rgb(69, 145, 193);
    border-right: 1px solid rgb(69, 145, 193);
    border-bottom: nonet;
    color: rgb(69, 145, 193);
    line-height: 0.5em;
    padding: 8px 10px;
}
/*Non-Selected Tab*/
.notSelectedTab {
    border: 1px solid rgb(69, 145, 193);
    border-bottom: none;
    background-color: rgb(69, 145, 193);
    color: rgb(255, 255, 255);
    line-height: 0.5em;
    margin-top: -1px;
    padding: 8px 10px;
}
.notSelectedTab:hover {
    background-image: none;
    background-color: rgb(69, 145, 193);
    color: rgb(255, 255, 255);
}
</style>


<script>
$( document ).ready( function() {
$('ul.nav li a').click(
function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation(); // stop the click from bubbling
    $(this).find('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
    $(this).addClass('selectedTab').removeClass('notSelectedTab');
});

});</script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
   <li><a class="selectedTab" href="#home" role="tab" data-toggle="tab">Home</a></li>
   <li><a class="notSelectedTab" href="#profile" role="tab" data-toggle="tab">Profile</a></li>
   <li><a class="notSelectedTab" href="#messages" role="tab" data-toggle="tab">Messages</a></li>
   <li><a class="notSelectedTab" href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Answer 1

您可以使用active标记上的li类来简化它。

<li class="active">...</li>

在脚本中将active类添加到当前元素并从兄弟姐妹中删除active类：

$(this).addClass("active").siblings().removeClass("active");

Answer 2

您有错误的选择器，用于将notSelectedTab类添加到先前选定的元素。使用：

$('ul.nav li a').click(
function(e) {
 e.preventDefault(); // prevent the default action
 e.stopPropagation(); // stop the click from bubbling
 $('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
 $(this).addClass('selectedTab').removeClass('notSelectedTab');
});

<强> Working Demo

Answer 3

<script>
$( document ).ready( function() {
$('ul.nav li a').click(
function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation(); // stop the click from bubbling
    $('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
    $(this).addClass('selectedTab').removeClass('notSelectedTab');
});

});</script>

应该这样做。

Answer 4

<强> JQuery的

var tabLabels=$("ul li a");
tabLabels.click(function(e){
    e.preventDefault(); // prevent the default action
    e.stopPropagation(); // stop the click from bubbling
    tabLabels.removeClass("selectedTab notSelectedTab").not(this).addClass("notSelectedTab");             
    $(this).addClass("selectedTab");
});

DEMO

Answer 5

代码的问题在于，在删除类时，您没有获得所有锚点之间的公共父级。在使用find：

之前尝试使用.closest()

$('ul.nav li a').click(
function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation(); // stop the click from bubbling
    $(this).closest('.nav').find('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
    $(this).addClass('selectedTab').removeClass('notSelectedTab');
});

为选定的选项卡面板添加和删除类

5 个答案: