2

ここに私が欲しいものがあります: 例

より詳細に：

2 つの iframe があり、一方が他方の上にあります。上のものには 4 つのボタン/画像があり、下のものは、これらのボタン/画像のいずれかがクリックされたときに URL/リンクが表示される場所です。私はこれを機能させました...

私が今欲しいのは、これらのボタンがクリックされたときに、非アクティブ（つまり、明るいピンク）からアクティブ（つまり、赤）の状態に画像を変更することです。また、別の 4 つのボタンをクリックすると赤くなり、以前のアクティブな (赤) ボタン/画像は非アクティブな状態 (ライト ピンク) に戻る必要があります。だから私はここに2つの画像が欲しい：（1）active.pngと（2）inactive.png。

また、ボタンの上にカーソルを合わせると、ボタンがactive.pngに変わるようにします。これは、onmouseover と onmouseout の効果で管理できました。アクティブな部分だけがわかりません。

一部のユーザーが無効にしている場合に備えて、javascript が必要ですか?

私はまた、おそらくラジオボタンを使用してから、cssまたは何かを使用してactive.pngおよびinactive.pngでそれらをスキニングすることも考えていましたが、これを行う方法がわかりません:P私は何が最善で最も簡単な方法なのかわかりません?

- - - - - - アップデート - - - - - -

わかりました、何かが機能していますが、まだそこまで進んでいません。それは行くべき道でさえないかもしれませんが、私がやったことは4つのリンクを作成し、それらすべてにIDを付けることです（ie.button1、button2 ..）

次にcssで、それぞれに対してこれを行いました：

ボタン1 { 幅: 66px; 高さ: 70px; 表示ブロック; background-image:url(images/inactive1.png); } button1:hover { width: 66px; 高さ: 70px; 表示ブロック; 背景画像:url(images/active1.png); } button1:focus{ 幅: 66px; 高さ: 70px; 表示ブロック; 背景画像:url(images/active1.png); }

しかし、別のボタンをクリックしない限り、フォーカスを失いたくありません。ページのどこかをクリックすると、フォーカスが失われます:(どうすれば修正できますか?

4

2 に答える 2

0

JS を使用せずにこれを行う唯一の方法は、元の投稿へのコメントに記載されているように、4 つの静的ページを作成することです。

本文のマークアップは次のようになります。

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

上記のリストはナビゲーションです。iframe4 つの静的ページがあるため、別個の は必要ありません。各静的ページで、liアクティブな静的ページへのリンクを含む要素は、「アクティブ」と呼ばれるクラスを取得します。

そこiframeに表示したいURLを格納します。

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

すべてをカバーする次の 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>

また、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 に答える