0

現在、私は次のようなものを使用しています

<li class="active"><a href="index.html">Home</a></li>
<li><a href="b.html">A</a></li>
<li><a href="c.html">B</a></li>
<li><a href="d.html">C</a></li>

ここには、クリックされたリンクに基づいて選択される 4 つの html ファイル index.html、a.html、b.html、および c.html があります。

代わりに、共通のヘッダーとフッターを含む同じ HTML ファイルにすべてのコンテンツを配置し、クリックされたボタンに応じてコンテンツを選択的に表示したいと考えています。

どうやってやるの？

4

1 に答える 1

1

あなたはこれを行うことができます

各ページのコンテンツを div に配置すると一意の ID が表示され、すべてが表示されず、li の各 a には div の ID があります

html

<li><a class="div1" href="#1">A</a></li>
<li><a class="div2" href="#2">B</a></li>
<li><a class="div3" href="#3">C</a></li>
<div id="1" class="hide" style=" width:100%; height: 100px;  background-color:red; "></div>
<div id="2" class="hide" style=" width:100%; height: 100px;  background-color:gold; "></div>

CSS

    .hide
    {
        display:none;
    }

JS

   <script>
    $(function () {
        $('li').on('click', function (e) {
            var href = $(this).find('a').attr('href');
            window.location.hash = href;
        });
        $('.div1').on('click', function (e) {

            $("#1").removeClass("hide");
            $("#2").addClass("hide");
            $("#3").addClass("hide");
        });
        $('.div2').on('click', function (e) {


            $("#2").removeClass("hide");
            $("#1").addClass("hide");
            $("#3").addClass("hide");
        });
        $('.div3').on('click', function (e) {

            $("#3").removeClass("hide");
            $("#1").addClass("hide");
            $("#2").addClass("hide");
        });

        if (window.location.hash == "#1") {
            $("#1").removeClass("hide");
            $("#3").addClass("hide");
            $("#2").addClass("hide");
        }

        if (window.location.hash == "#2") {
            $("#2").removeClass("hide");
            $("#3").addClass("hide");
            $("#1").addClass("hide");
        }
        if (window.location.hash == "#3") {
            $("#3").removeClass("hide");
            $("#1").addClass("hide");
            $("#2").addClass("hide");
        }
    });
  </script>
于 2013-11-12T12:48:50.407 に答える