Question

如何更改此js toggle script

$('#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”时，我想“先”返回它处于非活动状态（蓝色）和“秒”以红色突出显示，因为“第二个内容”正在显示等等......）

非常感谢所有天才!!

更新

我已经在测试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，如果您有动态标签页，那会更好。

Answer 2

如果此代码位于您的第一个切换功能中，则会更改CSS元素。

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

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

以下代码将进入元素点击功能。

// 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');

更改javascript切换脚本以突出显示活动状态

2 个答案: