使用javascript添加類或CSS：active

Question

我需要JS和CSS的幫助。 我正在使用JS隱藏和顯示網站上一個特定導航欄中的小節。 第一個問題是，我希望JS代碼專門用於該導航欄，而不適合同一站點上的其他許多導航欄。 下面是JS代碼：

        $('a').click(function(){
            $('section').hide();
            $($(this).attr('href')).show();
        }); 

下面是HTML代碼。 我想知道是否可以使用“導航”類在JS代碼中僅選擇此導航欄？

<ul class="navigation">
    <li class="link"><a href="#content1">Tab1</a></li>
    <li class="link"><a href="#content2">Tab2</a></li>
    <li class="link"><a href="#content3">Tab3</a></li>
</ul>

下一個問題與CSS有關。 我希望在網站加載時將＃content1和Tab1設為默認值-並希望將其中的文本設置為與其余顏色（紅色或其他顏色）不同的顏色。 當選擇了tab2時，我想改變顏色，而tab1像其他顏色一樣切換為黑色。但是，我無法使：active方法在CSS中工作（我想是因為JS確實沒有將其設置為活動狀態。）有人可以幫我嗎？ 以下是我的CSS代碼（並非全部相關）。

section {
    display: none;
}

section:first-of-type {
    display:block;
}

.navigation {
    list-style: none;
}

li {
    display: inline-block;
}

.nav2 {
    display: inline-block;
    width: 100px;
    margin-right: 25px;
    margin-bottom: 25px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    border: 1px;
    border-style: solid;
    border-color: #000000;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

提前非常感謝您！

Answer 1

創建一個CSS類，負責設計活動元素的樣式。 在此示例中，我們將使用類.active 。 重要的是要注意，這不是Pseudo-Class 。

我們將為標簽使用簡單的HTML標記：

<ul class="tabs">
  <li>
    <a href="#">my tab</a>
  </li>
</ul>

以下是選項卡樣式的簡約示例：

.tabs a { // represents the tabs
  border: 1px solid #000;
}

.tabs a.active { // represents the active tabs
  background: #f00;
}

下一步是創建腳本來處理選項卡上的單擊。 我們希望腳本從其他所有選項卡中刪除.active類，並將其分配給剛剛單擊的選項卡。 為此，我們可以創建一個如下所示的腳本：

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

    var $this = $(this), $ul = $this.parents('ul');

    $ul.find('a').removeClass('active');

    $this.addClass('active');

});

例

 $('.tabs').on('click', 'a', function() { var $this = $(this), $ul = $this.parents('ul'); $ul.find('a').removeClass('active'); $this.addClass('active'); }); 

 body { margin: 25px; } ul.tabs { margin: 0 0 30px 0; padding: 0; list-style: none; } ul.tabs li { display: inline-block; } ul.tabs li a { margin: 0 2px; padding: 5px 10px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); text-decoration: none; background: #eee; color: #888; text-transform: uppercase; border-radius: 4px; } ul.tabs li a:hover { box-shadow: 0 0 4px rgba(0, 0, 0, .4), 0 0 8px rgba(0, 0, 0, .8); } ul.tabs li a.active { background: #aaa; color: #fff; } 

 <ul class="tabs"> <li> <a href="javascript:void(0)">tab 1</a> </li> <li> <a class="active" href="javascript:void(0)">tab 2</a> </li> <li> <a href="javascript:void(0)">tab 3</a> </li> <li> <a href="javascript:void(0)">tab 4</a> </li> <li> <a href="javascript:void(0)">tab 5</a> </li> </ul> <ul class="tabs"> <li> <a href="javascript:void(0)">tab 1</a> </li> <li> <a class="active" href="javascript:void(0)">tab 2</a> </li> <li> <a href="javascript:void(0)">tab 3</a> </li> <li> <a href="javascript:void(0)">tab 4</a> </li> <li> <a href="javascript:void(0)">tab 5</a> </li> </ul> <ul class="tabs"> <li> <a href="javascript:void(0)">tab 1</a> </li> <li> <a class="active" href="javascript:void(0)">tab 2</a> </li> <li> <a href="javascript:void(0)">tab 3</a> </li> <li> <a href="javascript:void(0)">tab 4</a> </li> <li> <a href="javascript:void(0)">tab 5</a> </li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

Answer 2

jQuery選擇字符串使用與CSS相同的語法。 因此，僅選擇屬於導航子項的錨標記，可以使用后代選擇器 。

$('.navigation a')

對於您的CSS問題，無需使用:active選擇器。 只需向您的目標元素添加或刪除類。

$('.navigation a').click(function () {
  // make tabs default color
  $('.navigation a').removeclass('fancy-colors')

  // make clicked tab fancy
  $(this).addClass('fancy-colors')
})

查閱jQuery toggleclass文檔http://api.jquery.com/toggleclass/

在頁面加載時設置默認值僅意味着將您的課程添加到標記中。

<a class="fancy-colors">

Answer 3

好吧，讓我們先覆蓋CSS
如果您希望默認情況下激活鏈接，只需將其修改為

<ul class="navigation">
<li class="link"><a href="#content1" class="active">Tab1</a></li>
<li class="link"><a href="#content2">Tab2</a></li>
<li class="link"><a href="#content3">Tab3</a></li>

然后用css樣式

.active { your css } 

然后您可以通過JS處理休息，使用.find僅在導航中選擇元素，然后使用.addClass和.removeClass將a更改為active

$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});