1

クリックしたオプションを登録する方法と、次のコンテンツを表示する方法を知っています。

私がやりたいことは次のようなものです：

(デザインは気にしないでください) 次のコンテンツを表示するには、オプションをクリックする必要があります。

これは、どの言語を使用する必要があるかを知る必要があるWebサイト用です。おそらくjqueryですか？もしそうなら、やめるための助け。ボックスだけでページをリロードしたくありません。

私はphpといくつかのcssとhtmlの知識を持っていますが、javascriptとjqueryはあまりありません。

4

1 に答える 1

0

次に例を示します。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <style type="text/css">
            .choices { padding-left: 30px; padding-right: 30px; margin: 10px; }
            .enabled { background-color: #ff0000; color: #FFFF00 }
            .disabled { background-color: #ddd; color: #fff }
            .choosed { background-color: #ffd; color: #000 }
            .options { display:none; background-color: #fffff0}
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                  $('.choices').addClass('enabled');
                  $('.choices').click( function(){
                    $($(this).attr('href')).slideDown();
                    $('.choices').unbind('click').removeClass('enabled').addClass('disabled');
                    $(this).removeClass('disabled').addClass('chossed');
                  })
            });
        </script>
    </head>
    <body>
        <a class="choices" href="#target1">A</a>
        <a class="choices" href="#target2">B</a>
        <a class="choices" href="#target3">C</a> <br/>
        <div class="options" id="target1">You clicked option A</div>
        <div class="options" id="target2">You clicked option B</div>
        <div class="options" id="target3">You clicked option C</div>
    </body>
</html>
于 2012-09-22T17:19:02.837 に答える