gpt4 book ai didi

javascript - 切换导航栏中的文本发光?

转载 作者:行者123 更新时间:2023-11-28 00:23:32 26 4
gpt4 key购买 nike

大家好,新人。我已尽力通过搜索找到一个简单的解决方案,但我还没有找到任何适合我的解决方案。我的网站使用隐藏/显示 div 的导航栏来“更改页面”(全部包含在一个 HTML 文件中),目前没有视觉指示符来表明这些项目中的哪一个是当前页面。我怎样才能做到这一点,以便当单击菜单项时,该项目上启用文本发光效果(我假设是 CSS3 效果),并且所有其他菜单项上的文本发光都关闭?感谢您的帮助!

最佳答案

JsFiddle:http://jsfiddle.net/usd6v5kp/1/

HTML:

 <html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<title></title>
</head>
<body>
<p id="Test1" onclick="glow1()">ITEM ONE</p>
<p id="Test2" onclick="glow2()">ITEM TWO</p>
<p id="Test3" onclick="glow3()">ITEM THREE</p>
</body>
</html>

JQuery:

function glow1() {

$('#Test1').addClass('class1');
$('#Test2').removeClass('class1');
$('#Test3').removeClass('class1');
}



function glow2() {


$('#Test2').addClass('class1');
$('#Test1').removeClass('class1');
$('#Test3').removeClass('class1');
}

function glow3() {

$('#Test3').addClass('class1');
$('#Test1').removeClass('class1');
$('#Test2').removeClass('class1');
}

CSS:

 .class1 {
text-shadow: 0 0 12px #ff0000
}

关于javascript - 切换导航栏中的文本发光?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29760498/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com