个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
您好，我知道有很多帖子问同样的问题，但由于我理解起来太复杂了，因为我是 css、js 和 html 方面的新手。
所以当我的页面加载时。悬停效果很好，然后当我单击一个选项时...(执行一些 js 代码)然后悬停不起作用。我想弄清楚为什么会这样。但我不知道。
这是一个简单的代码(请尽量不要使用css3、html5和javascript以外的其他语言)...
<!DOCTYPE html>
<html>
<head>
</head>
<!--___________________STYLES-->
<style>
body {
padding: 0;
margin: 0;
background: gray;
}
a {
text-decoration: none;
color: black;
background: white;
display: block;
width: 200px;
font-size: 100px;
}
a:hover {
color: white ;
background: black ;
}
ul {
list-style: none;
}
#parrafo {
border: 1px dashed white;
height: 1.2em;
}
</style>
<!--___________________BODY-->
<body>
<br/>
<div id="d1">
<ul>
<li><a href="#" id="op1" onClick="SelectOp(this.id)">OP1</a></li>
<li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a></li>
<li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a></li>
<li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a></li>
<li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a></li>
</ul>
<br/>
<p id="parrafo"></p>
</div>
</body>
<!--___________________JAVSCRIPT-->
<script>
function clearOP(par) {
var i, n;
n = document.getElementsByTagName('a').length;
for (i=1; i<=n; i++) {
document.getElementById('op'+i).style.color = 'black';
document.getElementById('op'+i).style.background = 'white';
}
}
function SelectOp(param) {
var i, x;
i=1;
while (param != 'op'+i) {
i++;
}
clearOP(param);
document.getElementById('op'+i).style.color = 'white';
document.getElementById('op'+i).style.background = 'black';
}
</script>
</html>最佳答案
当您使用脚本设置样式时，它会覆盖您的 CSS 悬停规则。
改为切换类。
我还稍微优化了你的脚本，不需要使用所有那些代码。
<!DOCTYPE html>
<html>
<head>
</head>
<!--___________________STYLES-->
<style>
body {
padding: 0;
margin: 0;
background: gray;
}
a {
text-decoration: none;
color: black;
background: white;
display: block;
width: 200px;
font-size: 100px;
}
a:hover {
color: white;
background: black;
}
a.selected { /* added this class */
color: white;
background: black;
}
ul {
list-style: none;
}
#parrafo {
border: 1px dashed white;
height: 1.2em;
}
</style>
<!--___________________BODY-->
<body>
<br/>
<div id="d1" value="0">
<ul>
<li><a href="#" id="op1" class="selected" onClick="SelectOp(this.id)">OP1</a>
</li>
<li><a href="#" id="op2" onClick="SelectOp(this.id)">OP2</a>
</li>
<li><a href="#" id="op3" onClick="SelectOp(this.id)">OP3</a>
</li>
<li><a href="#" id="op4" onClick="SelectOp(this.id)">OP4</a>
</li>
<li><a href="#" id="op5" onClick="SelectOp(this.id)">OP5</a>
</li>
</ul>
<br/>
<p id="parrafo"></p>
</div>
</body>
<!--___________________JAVSCRIPT-->
<script>
function SelectOp(param) {
document.querySelector('.selected').className = '';
document.getElementById(param).className = 'selected';
}
</script>
</html>我还想建议不要使用内联脚本，使用事件监听器，就像在这个示例中一样
var elems = document.querySelectorAll('#d1 a'); /* find all anchor inside #d1 */
elems[0].className = 'selected'; /* set first as selected */
for (var i = 0; i < elems.length; i++) { /* iterate all and add click handler */
elems[i].addEventListener('click', function(e) {
document.querySelector('.selected').className = '';
e.target.className = 'selected';
})
}body {
padding: 0;
margin: 0;
background: gray;
}
a {
text-decoration: none;
color: black;
background: white;
display: block;
width: 200px;
font-size: 100px;
}
a:hover {
color: white;
background: #333;
}
a.selected { /* added this class */
color: white;
background: black;
}
ul {
list-style: none;
}
#parrafo {
border: 1px dashed white;
height: 1.2em;
}<br/>
<div id="d1" value="0">
<ul>
<li><a href="#" id="op1">OP1</a>
</li>
<li><a href="#" id="op2">OP2</a>
</li>
<li><a href="#" id="op3">OP3</a>
</li>
<li><a href="#" id="op4">OP4</a>
</li>
<li><a href="#" id="op5">OP5</a>
</li>
</ul>
<br/>
<p id="parrafo"></p>
</div>关于javascript - 菜单 : hover not working after I do click，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37760654/
26
4
0
将 .off 与 .click 结合使用有何用途或区别？ $('#link').off('click').on('click',function(){}); 对比 $('#link').on('cli
我正在学习 javascript，并且我见过不止一种注册点击事件的方法: $(DOMelement).click(function() {}); $(DOMelement).on('click',fu
我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。 文档 here似乎表明这是 .l
我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的，但是，我只是想真正深入了解本质细节。我可能一直在创建有错误的代码，并且我不想在网络上贡献和传播懒惰完成的代码。 所以，告诉我: What a
我想实现类似在 Android 上点击 Instagram 中的帖子的功能(我认为在 iOS 上应该是相同的功能)。在 Instagram 中，如果有人点击照片，它会打开，双击，它会被喜欢，然后单击并
我的点击事件有问题。它运行 1 次。示例: 我有 3 页(1 2 3)。当我点击 2 时它起作用了。然后在第 3 页，它又可以工作了。但我再次点击 2 不起作用。该事件未触发。 $("div .top
我正在尝试这样做。在 jsfiddle 中:http://jsfiddle.net/QGGhW/2/ 但是在我点击 not now 之后，下一个文本输入就不再可点击了。 我该怎么做？是否有类似 .on
我想知道是否有任何情况下使用 .click(function {...}); 而不是 .live('click', function { ...});? 据我所知，实时选项似乎是一个更好的选择，因此我
我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。 本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为
我可以使用一些帮助来调试这个: var factBody = jQuery(".fact__body"); jQuery(".fact").on("click", function() { j
如果我有一个用于 clicked 类的监听器，以及另一个用于 click-option-1、click-option-2 类的监听器，以及click-option-3，如何在我的 clicked 事件
下面的代码有什么区别吗？ $('#whatever').on('click', function() { /* your code here */ }); 和 $('#whatever').
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
我不擅长 UI 设计，所以我使用 bootstrap 和 jquery 来帮助我一点。我正在尝试将 jQuery 事件绑定(bind)到导航栏，因此当用户单击导航栏上的 p 标签时，它应该触发单击事件
问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？ HTML: Delete my
我想要完成的是“类似”的东西 $("button .toggleExcerpt) .toggle( function FIRST() { do first function..
function show1(){ $("#btn").click(show2()); window.alert(
我不明白为什么这不起作用。当我单击具有该类名的复选框时，clickId 被赋予值access-toggle-all，所以这没有意义(至少对我来说).. $(document).ready(functi
我有一个关于 click() 的复杂问题。我有 4 个按钮，分别命名为功能 1、功能 2、方法 1 和方法 2。 Function 1 Function 2 Method 1 Method 2 当单
最后，我认为这不是我特别需要解决的问题，但我不明白为什么会这样，这让我很困扰。 基本上，我有一些复选框，我只希望用户能够选择其中的一定数量。我正在使用下面的代码来实现该效果。 $j( function
我是一名优秀的程序员,十分优秀！