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>

我有四个 html 文件 index.html、a.html、b.html 和 c.html，它们是根据单击的链接选择的。

相反，我希望将所有内容都放在具有通用页眉和页脚的同一个 HTML 文件中，并根据单击的按钮选择性地显示内容。

我怎样才能做到这一点？

4

1 回答 1

1

你可以这样做

将每个页面的内容放在 div 中具有唯一的 id 并显示全部 none 并且 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 回答