更改JavaScript切換腳本以突出顯示活動狀態

Question

如何更改此js切換腳本

$('#toggle > span').click(function () {
var ix = $(this).index();

$('#first').toggle(ix == 0);
$('#second').toggle(ix == 1);
$('#third').toggle(ix == 2);
});

因此，“活動切換”或“點擊切換”將以其他顏色（例如紅色）突出顯示。 （例如：我希望“ First”以紅色突出顯示，因為這是默認狀態，並顯示“ first CONTENT”。當用戶按下“ Second”以顯示“ second CONTENT”時，我希望“ first”返回到它處於非活動狀態（藍色），“秒”用紅色突出顯示，因為正在顯示“秒內容”，依此類推...）

非常感謝你們所有的天才！！

更新

我已經在測試的html頁面頭部正文等上實現了腳本，並且一切正常，但是我實際上需要在joomla網站上的內部和文章中使用它，而且似乎不起作用。 這是我放入Joomla文章中的代碼（關聯的CSS已添加到模板CSS文件中）。

<p id="toggle"> 
<span class="active"> <a href="#">First</a></span>
<span> <a href="#">Second</a></span>
<span> <a href="#">Third</a></span>

</p>
<div id="first">first CONTENT</div>
<div id="second">Second CONTENT</div>
<div id="third">Third CONTENT</div>

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

<script>

$('#toggle > span').click(function () {
var ix = $(this).index();
$('#toggle > span').removeClass('active');
$(this).addClass('active');

$('#first').toggle(ix == 0);
$('#second').toggle(ix == 1);
$('#third').toggle(ix == 2);
});

</script>

任何想法有什么問題嗎？

Answer 1

將active類分配給第一個菜單項，並在代碼之前添加兩行，如下所示

$('#toggle > span').click(function () {
    var ix = $(this).index();
    $('#toggle > span').removeClass('active'); //Remove active clas from all span elements
    $(this).addClass('active'); //Adds active class to the one which was clicked

    $('#first').toggle(ix == 0);
    $('#second').toggle(ix == 1);
    $('#third').toggle(ix == 2);
});

演示

演示2 （無效的將顯示為藍色，如已注釋）

如果您使用動態標簽，則最好使用data- attribute屬性在元素之間切換，而不要使用id。

Answer 2

如果此代碼在您的firsts切換函數內，則將更改元素CSS。

<style>
.active {
background-color: red;
}

.inactive {
background-color: blue;
}
</style>

以下代碼將放在您的元素click函數中。

// reset css of other elements to unselected

$('#first').removeClass('active').addClass('inactive');
$('#second').removeClass('active').addClass('inactive');

// set the selected elements class to active
$(this).addClass('active');