Question

这是我想要的： Example

现在更详细：

我有2个iframe，一个在另一个之上。上面的那个有4个按钮/图像，下面的一个是当点击这些按钮/图像之一时将显示的URL /链接。我有这个工作......

我现在想要的是让这些按钮在点击时将图像从非活动（即浅粉色）变为活动（即红色）状态。此外，当我点击4个按钮中的另一个时，它将变为红色，之前的活动（红色）按钮/图像必须变回其无效状态（浅粉色）。所以我想要2张图片：（1）active.png和（2）inactive.png。

另外，当我将鼠标悬停在按钮上时，我希望按钮更改为active.png。这个我能够用onmouseover和onmouseout效果来管理。它只是ACTIVE部分是我无法弄清楚的。

我是否需要使用javascript，或者我可以不使用它，以防某些用户将其禁用？

我也在考虑使用单选按钮，然后用我的active.png和inactive.png使用css或其他东西对它们进行换肤，但我也不知道如何做到这一点：P我不知道什么是最好和最简单的要走的路？

------------ ----------- UPDATE

好吧，我有一些工作，但我还没有完全的方式。它甚至可能不是要走的路，但我所做的是创建4个链接并给它们一个id（ie.button1，button2 ..）

然后在css中我为每个人做了这个：

button1 {width：66px;身高：70px;显示：块;背景图像：网址（图像/ inactive1.png）; } button1：悬停{width：66px;身高：70px;显示：块;背景图像：网址（图像/ active1.png）; } button1：focus {width：66px;身高：70px;显示：块;背景图像：网址（图像/ active1.png）; }

但我不希望它失去焦点，除非点击另一个按钮。如果我点击页面上的任何地方，现在它失去了焦点:(我该如何解决这个问题？

Answer 1

没有JS的唯一方法是创建四个静态页面，如原始帖子的评论中所述。

你的身体标记看起来像这样：

<ul id="nav">
    <li class="active"><a href="site1.htm"></a></li>
    <li><a href="site2.htm"></a></li>
    <li><a href="site3.htm"></a></li>
    <li><a href="site4.htm"></a></li>
</ul>
<iframe src="www.url.com">
</iframe>

上面的列表是您的导航。您不需要单独的iframe，因为您有四个静态页面。在每个静态页面中，包含活动静态页面链接的li - 元素将获得一个名为“active”的类。

iframe存储您希望在其中显示的网址。

在您的css文件中，您可以像这样设置导航样式：

#nav a {background: url('images/inactive.png');}

#nav a:hover,
#nav li.active a{
    background: url('images/active1.png');
}

这应该可行，但使用JS的解决方案会更优雅。

Answer 2

我制作了涵盖所有文件的两个文件：

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Deep East Music</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        .buttons { float:left; width:60px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
        .buttons[isselected = "true"] { background-color:#ff7373; }
        .buttons[isselected = "false"] { background-color:#cccccc; }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");

                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
            });

            $("#button2").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");

                ////Use one of these if you need to reload the iframe
                //$('#myiframe').contentWindow.location.reload(true);
                //$("#myiframe").attr("src", $("#myiframe").attr("src"));
            });

            $("#button3").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
            });

            $("#button4").click(function () {
                $(".buttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
            });

        });


        function ClickedButton1 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173");
            return false;
        };

        function ClickedButton2 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F37674430");
            return false;
        };

        function ClickedButton3 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F3442336");
            return false;
        };

        function ClickedButton4 () {
            $("#myiframe").attr("src", "https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38359257");
            return false;
        };

    </script>
</head>
<body>

    <div>
        <div id="button1" class="buttons" isselected="true">button1</div>
        <div id="button2" class="buttons" isselected="false">button2</div>
        <div id="button3" class="buttons" isselected="false">button3</div>
        <div id="button4" class="buttons" isselected="false">button4</div>

        <iframe id="mybuttonsiframe" width="100%" height="60" scrolling="no" frameborder="no" src="buttons.htm"></iframe>

        <iframe id="myiframe" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F38593173"></iframe>
    </div>
</body>
</html>

而按钮.htm看起来像是：

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Deep East Music</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        /* CSS Here */
        .iframebuttons { float:left; width:100px; height:25px; margin:10px 0 0 5px; cursor:pointer; }
        .iframebuttons[isselected = "true"] { background-color:#ff7373; }
        .iframebuttons[isselected = "false"] { background-color:#cccccc; }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#iframebutton1").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton1();
            });

            $("#iframebutton2").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton2();
            });

            $("#iframebutton3").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton3();
            });

            $("#iframebutton4").click(function () {
                $(".iframebuttons").attr("isselected", "false");
                $(this).attr("isselected", "true");
                parent.ClickedButton4();
            });

        });
    </script>
</head>
<body>
        <input type="button" id="iframebutton1" class="iframebuttons" isselected="true" value="iframebutton1" />
        <input type="button" id="iframebutton2" class="iframebuttons" isselected="false" value="iframebutton2" />
        <input type="button" id="iframebutton3" class="iframebuttons" isselected="false" value="iframebutton3" />
        <input type="button" id="iframebutton4" class="iframebuttons" isselected="false" value="iframebutton4" />
</body>
</html>

如何更改按钮/图像onclick到活动状态？

2 个答案: