时间戳

首页 > 解决方案 > 我可以使用 Javascript 添加/删除 li 的类吗？

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

问题描述

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

我需要在 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

标签： javascripthtmlcssnavigation

解决方案

您还需要在内容中包含活动类，以根据单击的锚标记进行隐藏和显示。您可以通过获取单击的锚标记的 href 属性来找到相应选项卡面板的 id。

$('.nav-tabs a').on('click', function() {

  $('.nav-tabs li.active').removeClass('active');
  $('.tab-pane.active').removeClass('active');

  $(this).parent('li').addClass('active');
  $($(this).attr("href")).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 a {
  background: #004964;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

推荐阅读