Question

目前，我正在使用类似

的内容

<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文件中，并根据单击的按钮选择性地显示内容。

我该怎么做？

Answer 1

你可以这样做

将每个页面的内容放在div中有唯一的ID并显示所有无，并且每个在li中都有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>

带有单个文件中所有源的选项卡式内容

1 个答案: