如何保持一个图像按钮处于活动状态,直到单击另一个

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何保持一个图像按钮处于活动状态,直到单击另一个相关的知识,希望对你有一定的参考价值。

我正在建立一个网站(div可能是一个更好的选择,但目前我正在使用框架)。它由menu.html和main.html组成。 Main.html分别更改了menu.html中单击的按钮。

menu.html - 大约9个按钮 - 每个按钮有3个相关图像 - 默认(xxx.jpg) - 鼠标悬停(xxx_hover.jpg) - 点击(xxx_onclick.jpg)

AIM 1.鼠标悬停时图像更改并在mouseout上返回默认值2.单击时图像更改,并保持单击直到另一个单击(在同一帧内)

我到目前为止...我不知道如何保持图像保持为xxx_onclick.jpg直到另一个点击。另外,使用下面的代码,我收到一个错误;当我鼠标悬停在单击的图像上时,它将尝试找到不存在的xxx_onclick_hover.jpg。我不确定我应该使用哪些功能。

<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>

<body>
<img class="menu_btn" src="button1S.jpg"><br>
<img class="menu_btn" src="button2S.jpg"><br>
<img class="menu_btn" src="button3S.jpg"><br>
<img class="menu_btn" src="button4S.jpg">
</body>

<script>
$(".menu_btn")
    .mouseover(function() {//onmouseover
    this.src = this.src.replace('.jpg', '_hover.jpg');//replace src link from .jpg to _hover.jpg
    })

    .mouseout(function() {//onmouseout
    this.src = this.src.replace('_hover.jpg', '.jpg');//replace src link from _hover.jpg to .jpg
    })

    .click(function() {//onclick
    $(".menu_btn").unbind('mouseover');//disable mouseover to prevent error (ie. button1S_onclick_hover.jpg), but this disable all images...
    this.src = this.src.replace('_hover.jpg', '_onclick.jpg');//onclick reply _hover.jpg to _onclick.jpg
    }
);
</script>

非常感谢你提前。

下面是一组用Joce的建议进行测试的代码*尚未100%实用。

<html>
<head>
    <style type="text/css">
        .menu-btn {
            background: url('http://icdn.pro/images/en/s/m/smiley-smile-icone-8052-128.png') no-repeat center;
            width: 128px;
            height: 128px;
            display: inline-block;
        }
        .menu-btn:hover {
            background: url('http://www.baza-lesnik.ru/images/blobwars.png') no-repeat center;
        }
        .menu-btn.active {
            background: url('http://cdn.flaticon.com/png/256/40230.png') no-repeat center;
        }
    </style>
</head>

<body>
    <a href="#" class="menu-btn"></a>
    <a href="#" class="menu-btn"></a>
    <a href="#" class="menu-btn"></a>
    <a href="#" class="menu-btn"></a>
    <a href="#" class="menu-btn"></a>
</body>

<script type="text/javascript">
    $(function() {
        $(".menu-btn").on("click", function(e) {
            e.preventDefault();
            $(".menu-btn.active").removeClass("active");
            $(this).addClass("active");

            //Do more things
        });
    });
</script>
</html>
答案

我建议你使用a而不是img并设置background-image。单击,删除CSS类active并将其添加到单击的按钮。

这是代码:

<head>
    <style type="text/css">
        .menu-btn {
            width: 16px;
            height: 16px;
            display: inline-block;
        }

        .menu-btn-1 {
            background: url('xxx.jpg') no-repeat center;
        }

        .menu-btn-1:hover {
            background: url('xxx_hover.jpg') no-repeat center;
        }
        .menu-btn-1.active {
            background: url('xxx_onClick.jpg') no-repeat center;
        }

        .menu-btn-2 {
            background: url('xxx.jpg') no-repeat center;
        }

        .menu-btn-2:hover {
            background: url('xxx_hover.jpg') no-repeat center;
        }
        .menu-btn-2.active {
            background: url('xxx_onClick.jpg') no-repeat center;
        }

        ...
    </style>
</head>

<body>
    <a href="#" class="menu-btn menu-button-1"></a>
    <a href="#" class="menu-btn menu-button-2"></a>
    <a href="#" class="menu-btn menu-button-3"></a>
    <a href="#" class="menu-btn menu-button-4"></a>
    <a href="#" class="menu-btn menu-button-5"></a>
</body>

<script type="text/javascript">
    $(function() {
        $(".menu-btn").on("click", function(e) {
            e.preventDefault();
            $(".menu-btn.active").removeClass("active");
            $(this).addClass("active");

            //Do more things
        });
    });
</script>

编辑:

由于每个按钮都有不同的图像,因此您应该添加一个类来处理background-image。我编辑了上面的代码。

如果您更喜欢使用javascript,您可以收听mouseoverclick事件并更改jQuery中的background-image

以上是关于如何保持一个图像按钮处于活动状态,直到单击另一个的主要内容,如果未能解决你的问题,请参考以下文章

即使另一个配置文件被激活,如何保持 activeByDefault 的 Maven 配置文件处于活动状态?

从 UIViewController 切换到另一个时如何保持 UILongPressGestureRecognizer 处于活动状态

发送消息后保持 textarea 处于活动状态

反应路径网址并查看更改但组件功能仍处于活动状态。为什么?

Angular 2在条件下更改类

Excel SaveAs 更改活动工作簿 - 如何另存为并保持活动工作簿处于活动状态? [复制]