某些頁面上的活動邊框CSS/HTML

Question

因此，我正在製作一個邊框按鈕，該按鈕在您處於該頁面時處於活動狀態。但是當你按下第二個邊框按鈕時，第一個邊框將被刪除，第二個邊框將被刪除。它與本網站上的基本相同。 「問題，工作，文檔Beta，標籤」按鈕。當您在該頁面上時，一個燈會亮起，另一個燈會熄滅。我試圖在谷歌上查找它，但無法找到。我試着通過谷歌瀏覽器「檢查元素」來查看代碼。

Answer 1

需要一點CSS和HTML。如果你希望result元素在不改變頁面的情況下是「可激活的」，你還需要一些JS。

$('button').on('click', function() { 
 
    $('button').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

button.active { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="active">Active Page</button> 
 
<button>Not Active Page</button>

Answer 2

我能想到過的最簡單的方法是將「活動」類到要點亮該網頁上的按鈕。

Answer 3

確保您在每個頁面上都具有完全相同的HTML。然後在每個頁面中，通過將「活動」類僅分配給該按鈕，以不同方式設置相應按鈕的樣式。例如：

在主頁上

<a class="button active" href="index.html">Home</a> 
<a class="button" href="about.html">About</a> 

在關於頁面

<a class="button" href="index.html">Home</a> 
<a class="button active" href="about.html">About</a> 

CSS

.button { 
background-color: grey; 
} 

.active { 
background-color: orange; 
}