javascript - 我可以使用 Javascript 添加/删除 li 的类吗？

Question

我无法重新创建我在另一个网站上看到的内容。

我需要在所选的 LI 上有一个“事件”类

我正在使用 Umbraco CMS，但出于某种原因并没有立即加载所有 CSS，我也无法使用 Javascript 函数。

此时我已经加深了对 HTML 和 CSS 的了解。

$( '.nav-tabs a' ).on( 'click', function () {
    $( '.nav-tabs a' ).find( 'li.active' ).removeClass( 'active' );
    $( this ).parent( 'li' ).addClass( 'active' );
});


.schedule-tabs {
    display: block;
    max-width: 650px;
}

.nav-tabs a {
    padding: 0 20px;
    line-height: 52px;
    display: block;
    background: #ccc;
    color: #fff;
    transition: 0.5s ease; 
}

.nav-tabs .active li a {
    background: #004964;
}

.nav-tabs a:active, .nav-tabs a:focus {
    background: #004964;
}

.nav-tabs > li {
    position: relative;
    display: block;
    float: left;
    font-weight: 700;
    font-size: 18px;
}

.tab-content {
    padding: 30px;
    max-width: 650px;
    background: #fff;
}

.label .label-secondary span {
    float: right;
    background: #da4444;
    color: #fff;
    font-size: 12pt;
    padding: 3px;
}


<div class="tabs schedule-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#oct8" data-toggle="tab">Oct 8th</a></li>
<li><a href="#oct9" data-toggle="tab">Oct 9th</a></li>
<li><a href="#oct10" data-toggle="tab">Oct 10th</a></li>
</ul>
</div>
<div class="tab-content lgray-bg">
<div id="oct8" class="tab-pane active">
<div class="view view-conf-schedule view-id-conf_schedule view-display-id-block view-dom-id-c1b8d1fcc9e989a989c4f0a222dc6ae6">
<div class="view-content">
<div class="event-task">
<h5>Pre-Conference Reception &amp; Registration<span class="label label-secondary">6:00 pm</span></h5>
<div class="view view-speakers view-id-speakers view-display-id-block_2 view-dom-id-932d21aad7d0d6a8bf1e41ac95ab0f1c"></div>
<p>Location: Hotel Halifax (Bluenose Room)</p>
<p>Networking, cash bar, refreshments and light snacks provided</p>
</div>
</div>
</div>
</div>
<div id="oct9" class="tab-pane">
<div class="view view-conf-schedule view-id-conf_schedule view-display-id-block view-dom-id-9e8eaa7629f84acd7c096522dfe6590f">
<div class="view-content">
<div class="event-task">
<h5>Conference Sessions Day 1<span class="label label-secondary">9:00 am</span></h5>
<div class="view view-speakers view-id-speakers view-display-id-block_2 view-dom-id-afede0c1055f0e4a61ec88750c265e44"></div>
<p>Conference sessions to be announced.</p>
</div>
<div class="event-task">
<h5>Offsite Social Event<span class="label label-secondary">7:00 pm</span></h5>
<div class="view view-speakers view-id-speakers view-display-id-block_2 view-dom-id-1957e7851f79b2c1a727a3f299bde2b9"></div>
<p>Location: To be announced</p>
<p>Networking, cash bar, appetizers provided</p>
</div>
</div>
</div>
</div>
<div id="oct10" class="tab-pane">
<div class="view view-conf-schedule view-id-conf_schedule view-display-id-block view-dom-id-4d5a54b54db033c3269c3ed762cdc807">
<div class="view-content">
<div class="event-task">
<h5>Conference Sessions Day 2<span class="label label-secondary">9:00 am</span></h5>
<div class="view view-speakers view-id-speakers view-display-id-block_2 view-dom-id-0ad3697843cc6abfa6e8485c0195cded"></div>
<p>Conference sessions to be announced.</p>
</div>
</div>
</div>
</div>
</div>

第一个选项卡应该已经处于“事件”状态并具有蓝色背景，并且应该在其他按钮被选中时切换。我也无法在 Codepen 中复制它。

这里的工作示例:https://globalpetroleumshow.com/test

Answer 1

也许在整个过程中删除事件类很重要。从所有 li 中删除 active。但是通过 id 为当前 li 添加事件类。

$(".nav-tabs > li").click(function(){
$('.nav-tabs > li').removeClass('active'); // Remove classs all
$('.nav-tabs >li#li_'+this.id.substr(3)).addClass('active'); // add class in current li
});

<div class="tabs schedule-tabs">
<ul class="nav nav-tabs">
<!-- add id at each li item-->
<li class="active" id="li_oct8"><a href="#oct8" data-toggle="tab">Oct 8th</a></li>
<li id="li_oct9"><a href="#oct9" data-toggle="tab">Oct 9th</a></li>
<li id="li_oct10"><a href="#oct10" data-toggle="tab">Oct 10th</a></li>
</ul>
</div>