Question

我正在尋找這個，但只能找到基於ul列表的解決方案。

我有這樣的代碼：

<div class='nav'> 
    <a class='nav-link nav-01' id="tab01" href='#scene-1'></a> 
    <a class='nav-link nav-02' id="tab02" href='#scene-2'></a> 
    <a class='nav-link nav-03' id="tab03" href='#scene-3'></a> 
    <a class='nav-link nav-04' id="tab04" href='#scene-4'></a> 
</div> 

我想改變類（例如 「NAV-01」 至 「NAV-01-ON」）時，一下就可以了。此外，每個鏈接都有一個不同的活動類風格（nav-01-on爲nav-01，nav-02-on爲nav-02 ...）。

有什麼建議嗎？在此先感謝;-)

Answer 1

此外，每個鏈接都有一個活動的類風格不同（nav-01-on爲nav-01，nav-02-on爲nav-02 ...）。

由於您正在使用類，因此您並不需要使用不同的類名來描述鏈接的「活動」狀態。這對CSS類很酷。因爲你的鏈接已經有了一個唯一的標識符，你賦予它們的id屬性的形式，你只需要應用一個通用的'活動狀態'類，例如on例如（可以是你想要的任何東西） 。然後在你的CSS，你可以做類似

 

    .on { 
     /* general rules for elements with the .on class */ 
    } 

    #tab01.on { 
     /* specific rules for element #tab01 with the .on class */ 
    } 

我想改變類（例如 「NAV-01」 至 「NAV-01-ON」）時，一下就可以了。

由於你的問題被標記爲jquery我將使用jQuery，所以這裏是你想要的一個天真的解決方案。我相信，你可以改進它。

//We start assuming we have no active link 
var $activeLink = null; 

//We apply a listener to every element with the class .nav-link, using jQuery 
$('.nav-link').click(function() { 
    if ($activeLink) { 
     $activeLink.removeClass('on'); 
    } 
    //Store the link we clicked on as the active link. 
    //Notice we are wrapping it with the jQuery function, 
    //so $activeLink is a jQuery object 
    $activeLink = $(this); 
    $activeLink.addClass('on'); 
}); 

這裏是上面的小提琴：https://jsfiddle.net/p1tumym9/4/

Answer 2

Working Fiddle to play around with

你應該做些什麼，使生活變得更加簡單爲自己是一個active類之間，並在你的CSS切換隻需指定每個鏈接在具有active類時的外觀，而不是創建一堆獨特的類（這些類可能難以管理）。

如何將活動鏈接之間切換：

$('.nav').find('a').click(function(){ 
    // Remove active class from all links 
    $('.nav').find('a').each(function(){ 
    $(this).removeClass('active'); 
    }); 
    // Add active class to current link 
    $(this).addClass('active'); 
}); 

而在你的CSS只是規定如何給予active類時每個環節都會看：

.nav-01.active { 
    /* active styles for nav-01 */ 
} 

.nav-02.active { 
    /* active styles for nav-01 */ 
} 

.nav-03.active { 
    /* active styles for nav-01 */ 
} 

.nav-04.active { 
    /* active styles for nav-01 */ 
}