选项卡式内容，所有来源都在一个文件中答案

【问题标题】：Tabbed content with all source in a single file选项卡式内容，所有来源都在一个文件中
【发布时间】：2013-11-12 12:24:41
【问题描述】：

目前，我正在使用类似的东西

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

我该怎么做？

【问题讨论】：

标签： html css

【解决方案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;
    }

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

【讨论】：