2

这是我想要的： 例子

现在更详细地说：

我有 2 个 iframe，一个在另一个之上。上面的一个有 4 个按钮/图像，下面的一个是单击这些按钮/图像之一时将显示 url/链接的位置。我得到了这个工作......

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

另外，当我将鼠标悬停在按钮上时，我希望按钮更改为 active.png。这我可以通过 onmouseover 和 onmouseout 效果进行管理。它只是活动部分是我无法弄清楚的。

我需要javascript吗？如果某些用户禁用了它，我可以不用它吗？

我也在考虑可能使用单选按钮，然后使用我的 active.png 和 inactive.png 使用 css 或其他东西对它们进行蒙皮，但我也不知道该怎么做：P 我不知道什么是最好和最简单的方法?

- - - - - - 更新 - - - - - -

好的，我得到了一些工作，但我还没有走到那一步。它甚至可能不是要走的路，但我所做的是创建 4 个链接并给它们一个 id (ie.button1, button2 ..)

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

button1 { 宽度：66px; 高度：70px；显示：块；背景图像：url（图像/inactive1.png）；} button1:hover { 宽度: 66px; 高度：70px；显示：块；背景图像：url（图像/active1.png）；} button1:focus{ 宽度：66px; 高度：70px；显示：块；背景图像：url（图像/active1.png）；}

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

4

2 回答 2

0

没有 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包含指向活动静态页面的链接的 - 元素会获得一个名为“活动”的类。

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

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

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

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

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

于 2013-03-13T00:14:21.913 回答
0

我制作了这两个文件，涵盖了所有内容：

<!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>

而且buttons.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>
于 2013-03-13T01:01:20.247 回答