javascript - 更改 javascript 切换脚本以突出显示事件状态

Question

如何更改此设置 js toggle script

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

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

因此“事件切换”或“单击切换”以不同的颜色突出显示，例如红色。 (例如:我希望“第一”以红色突出显示，因为这是默认状态并且显示“第一内容”。当用户按“第二”显示“第二内容”时，我希望“第一”返回到它处于非事件状态(蓝色)，并且“第二个”以红色突出显示，因为正在显示“第二个内容”等等...)

非常感谢你们所有的天才!!

更新

我已经在测试 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);
});

Demo

Demo 2 (不活动的将是蓝色的，如评论所示)

如果您有动态选项卡，最好使用 data- 属性在元素之间切换，而不是使用 id。