Jquery if 可见条件不起作用
我这里有一个使用 jQuery 的页面： http://treethink.com/services 我想做的是，如果其中显示幻灯片或子页面，请更改按钮的背景颜色和颜色。
为此，我尝试说，如果显示某个 div，则某个按钮的背景颜色会发生变化。但是，您可以看到它无法正常工作，它正在更改网页的颜色，但不会删除颜色更改并在更改页面时在不同的按钮上添加颜色更改。
这是总体代码：
/* Hide all pages except for web */
$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
/* When a button is clicked, show that page and hide others */
$("#services #web-button").click(function() {
$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
});
$("#services #print-button").click(function() {
$("#services #print-block").show();
$("#services #web-block").hide();
$("#services #branding-block").hide();
});
$("#services #branding-button").click(function() {
$("#services #branding-block").show();
$("#services #web-block").hide();
$("#services #print-block").hide();
});
/* If buttons are active, disable hovering */
if ($('#services #web-block').is(":visible")) {
$("#services #web-button").css("background", "#444444");
$("#services #web-button").css("color", "#999999");
}
if ($('#services #print-block').is(":visible")) {
$("#services #print-button").css("background", "#444444");
$("#services #print-button").css("color", "#999999");
}
if ($('#services #branding-block').is(":visible")) {
$("#services #branding-button").css("background", "#444444");
$("#services #branding-button").css("color", "#999999");
}
谢谢，
韦德
I have a page going here that uses jQuery: http://treethink.com/services
What I am trying to do is, if a slide or sub-page is shown in there, change the background colour and colour of the button.
To do this I tried saying, if a certain div is shown, the background colour of a certain button changes. However, you can see there that it isn't working properly, it is changing the colour for the web one but not removing the colour change and adding a colour change on a different button when you change pages.
Here is the overall code:
/* Hide all pages except for web */
$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
/* When a button is clicked, show that page and hide others */
$("#services #web-button").click(function() {
$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
});
$("#services #print-button").click(function() {
$("#services #print-block").show();
$("#services #web-block").hide();
$("#services #branding-block").hide();
});
$("#services #branding-button").click(function() {
$("#services #branding-block").show();
$("#services #web-block").hide();
$("#services #print-block").hide();
});
/* If buttons are active, disable hovering */
if ($('#services #web-block').is(":visible")) {
$("#services #web-button").css("background", "#444444");
$("#services #web-button").css("color", "#999999");
}
if ($('#services #print-block').is(":visible")) {
$("#services #print-button").css("background", "#444444");
$("#services #print-button").css("color", "#999999");
}
if ($('#services #branding-block').is(":visible")) {
$("#services #branding-button").css("background", "#444444");
$("#services #branding-button").css("color", "#999999");
}
Thanks,
Wade
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
抱歉，这有点不相关，但是您可以通过简化代码来节省很多：
您的版本：
更简单的版本：
它们应该工作相同。就这样。
Sorry that this is slightly unrelated, but you could save a lot by simplifying your code:
Your version:
Simpler version:
They should work the same. That's all.
您的
if语句仅执行一次。当您切换页面时，if语句不会再次运行，因此不会发生任何变化。您需要将
if语句放入函数中，然后立即或在切换页面后调用该函数。顺便说一句，您可以使用单个
css调用设置多个属性，如下所示：Your
ifstatements are only being executed once. When you switch pages, theifstatements are not run again, so nothing changes.You need to put the
ifstatements in a function, then call the function both immediately and after switching pages.By the way, you can set multiple properties with a single
csscall, like this:谢谢 SLAks，你的建议有效，但由于某种原因，它不允许我重置 css 悬停。当 div 的按钮恢复为非活动状态时，它不会悬停。
/* 隐藏除网页之外的所有页面 */
Thanks SLaks, your suggestion worked but for some reason it won't let me reset the css hovers. When the div's button goes back to not being active it won't hover still.
/* Hide all pages except for web */