如何在 HTML-CSS 中切换图像？ [复制]
Posted
技术标签:
【中文标题】如何在 HTML-CSS 中切换图像？ [复制]【英文标题】：how to toggle image in HTML-CSS? [duplicate] 【发布时间】：2016-01-10 21:32:51 【问题描述】：我正在尝试切换图像，我搜索了网络但找不到适合我的场景的解决方案。我在右侧选项卡式菜单上有三个按钮。默认情况下，它会加载第一个 DIV，然后当我单击第二个按钮时，它会加载类似于第三个的第二个 div。现在我的按钮在背景中有一个图像。我想通过切换图像来显示哪个 div 处于活动状态
现在看到这张图片 这是我的菜单 第一个是活动的 这是一个 li 标签，我已经将背景设置为那个 li 现在当我点击第二个选项卡时，我想将三个选项卡中的图像更改为：第一个将与线和一个活跃的没有线..
也许它太混乱了:(
这是代码::
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul style="float:right">
<li>
<a href="#a" class="clickable"></a>
</li>
<li>
<a href="#b" class="bizrtc"></a>
</li>
<li>
<a href="#c" class="lab"></a>
</li>
</ul>
<div id="a">
<object type="text/html" data="home.html" style="overflow:auto;"> </object>
</div>
<div id="b">
<object type="text/html" data="contact.html" style="overflow:auto;"></object>
</div>
<div id="c">
<object type="text/html" data="blog.html" style="overflow:auto;"></object>
</div>
</div>
<script>
$("#siteloader").html('<object data="home.html">');
</script>
<style type="text/css">
.ui-tabs.ui-tabs-vertical
padding: 0;
width: 104%;
.ui-tabs.ui-tabs-vertical .ui-widget-header
border: none;
.ui-tabs.ui-tabs-vertical .ui-tabs-nav
float: left;
width: 4em;
border-radius: 4px 0 0 4px;
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li
clear: left;
width: 100%;
margin: -52px 0px;
height: 230px;
border-width: 1px 0 1px 1px;
border-radius: 4px 0 0 4px;
overflow: hidden;
position: relative;
right: 38px;
z-index: 2;
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a
display: block;
width: 100%;
padding: 0.6em 1em;
height: inherit;
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover
cursor: pointer;
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active
margin-bottom: -52px;
padding-bottom: 0;
border-right: 1px solid white;
height: 230px;
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child
margin-top: -52px;
.ui-tabs.ui-tabs-vertical .ui-tabs-panel
float: left;
width: 28em;
border-left: 1px solid gray;
border-radius: 0;
position: relative;
left: -1px;
.clickable
background: url(buttons/umobility_button_active.png) no-repeat 6px center;
.bizrtc
background: url(buttons/labs_button.png) no-repeat 6px center;
.lab
background: url(buttons/rtcbiz_button.png) no-repeat 6px center;
</style>
</body>
<script type="text/javascript">
$('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
</script>
</html>
【问题讨论】：
您可以在单击它们时添加一个名为“活动”的类，然后在包含该活动类时创建一个具有不同背景图像的新 CSS 规则 但我已将它们设置在后台我可以更改它们> ...是的。您只需创建一个包含活动类的新 CSS 规则，并使用不同的图像。 我的 css 规则应该是什么？我对他们了解不多，我只是仔细阅读了一个教程并完成了这个 jQuery UI 选项卡已经负责处理类“ui-tabs-active”，只要单击特定选项卡。您只需要为活动场景编写 CSS。请参阅@J.D. 的答案。下面的奴仆，完美。 【参考方案1】：包含另一个状态的 CSS 规则如下所示：
.clickable.active
background: url(buttons/umobility_button_active.png) no-repeat 6px center;
.bizrtc.active
background: url(buttons/labs_button_active.png) no-repeat 6px center;
.lab.active
background: url(buttons/rtcbiz_button_active.png) no-repeat 6px center;
不过，您需要使用 jquery onClick 调用选项卡。
$("#tabs li a").click(function()
$(this).addClass('active');
);
【讨论】：
这可行，但我只想将一个显示为活动的。所以现在发生的事情是最初只有第一个处于活动状态，然后当我点击第一个和第二个时，当我点击第三个时，所有 thre 都处于活动状态，所以一次只有一个应该处于活动状态 试试这个 $("#tabs li a").click(function() $("#tabs li a").removeClass('active'); $(this).addClass( '活动'); ); @PrabhuSuriya 这有效，但不适用于第一个标签，它始终保持活动状态【参考方案2】：请仔细阅读代码中的 css。只需添加到您现有的块中
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active
margin-bottom: -52px;
padding-bottom: 0;
border-right: 1px solid white;
height: 230px;
另一个规则，例如
background-image:url( path-to-file );
像
这样的块li.ui-tabs-active.a new rule for class a
li.ui-tabs-active.b new rule for class b
li.ui-tabs-active.c new rule for class c
toggle 功能来自 jquery ui，所以没有什么可做的。
【讨论】：
以上是关于如何在 HTML-CSS 中切换图像？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章