Содержимое с вкладками со всеми источниками в одном файле

Question

Содержимое с вкладками со всеми источниками в одном файле

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 с общими верхними и нижними колонтитулами и просто выборочно отображало контент в зависимости от того, какая кнопка была нажата.

Как я могу это сделать?

Moeb 12 нояб. 2013, в 14:20

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Mahmoude Elghandour · Answer 1 · 2013-11-12T11-12-00.000Z

вы можете сделать это

помещать содержимое каждой страницы в div имеет уникальный идентификатор и отображать все, и каждый из них имеет ли id div

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>

Вы можете увидеть этот сайт zacharyolson.com