如何更改此设置 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>
有什么问题吗?
最佳答案
为第一个菜单项分配一个 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 2 (不活动的将是蓝色的,如评论所示)
如果您有动态选项卡,最好使用 data-
属性在元素之间切换,而不是使用 id。
关于javascript - 更改 javascript 切换脚本以突出显示事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25043362/