如何在 HTML-CSS 中切换图像？ [复制]答案

【问题标题】：how to toggle image in HTML-CSS? [duplicate]如何在 HTML-CSS 中切换图像？ [复制]
【发布时间】：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" width="1280px" height="720px" style="overflow:auto;"> </object>
        </div>
        <div id="b">
            <object type="text/html" data="contact.html" width="1280px" height="720px" style="overflow:auto;"></object>
        </div>
        <div id="c">
            <object type="text/html" data="blog.html" width="1280px" height="720px" 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. 的答案。下面的奴仆，完美。

标签： javascript jquery html css

【解决方案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，所以没有什么可做的。

【讨论】：