создание навигации по страницам, не в состоянии скрыть и показать контейнеры

Question

создание навигации по страницам, не в состоянии скрыть и показать контейнеры

0

Я пытаюсь сделать одностраничную навигацию, но не могу показать и скрыть другие контейнеры.

basicall, это 3 ссылки. я фиксирую событие клика и устанавливаю соответствующее скрытие контейнера или показываю его с помощью эффекта скольжения.

код показан ниже. Спасибо за помощь.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
   <style type="text/css">
    .current
    {
        display: block;
    }

    #about_container, #principles_container, #programs_container
    {
        display: none;
    }
  </style>
  <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
        $('[id^=btn_]').click(function (event) {
            event.preventDefault();

            //here you can also do all sort of things
            var elementToShowId = this.id;
            elementToShowId = elementToShowId.replace("btn_", "") + "_container";

            alert(elementToShowId);

            if ($('.current').exists()) {

                $(".current").hide('slide', { direction: 'right',
                    complete: function () {
                        show(elementToShowId);
                        $(this).removeClass('current');
                    }
                }, 500, null);
            }
            else {
                show(elementToShowId);
            }

            if ($('.active').exists()) {
                $(".active").removeClass('active');
            }
            $(this).addClass('active');

          });
      });


      function show(elementId) {
        $("#" + elementId).show('slide', { direction: 'left', complete: function () {

            $(this).addClass('current');
            if (elementId == "contact") {
                initializeMap();
            }

        }
        }, 500, null);
    }

   </script>
  </head>
<body>
 <ul>
    <li><a id="btn_about" href="#about"><strong>About</strong></a></li>
    <li><a id="btn_principles" href="#principles"><strong>Principles</strong></a></li>
    <li><a id="btn_programs" href="#programs"><strong>Programs</strong></a></li>
 </ul>
  <div id="home_container" class="current">
    Home</div>
  <div id="about_container">
    about</div>
 <div id="principles_container">
    principles</div>
 <div id="programs_container">
    programs</div>
</body>
</html>

carrieat 24 фев. 2014, в 06:31

Источник

0

пожалуйста, предоставьте jsfiddle demo!
Farkhat Mikhalko 24 фев. 2014, в 05:33
0

вот скрипка jsfiddle.net/3432c . по умолчанию домашний контейнер должен быть виден. когда кто-то нажимает на контейнер about, он должен быть видим, а другие контейнеры должны быть скрыты
carrieat 24 фев. 2014, в 05:54

Теги:

javascript

jquery

navigation

1 ответ

Ещё вопросы

пожалуйста, предоставьте jsfiddle demo!
вот скрипка jsfiddle.net/3432c . по умолчанию домашний контейнер должен быть виден. когда кто-то нажимает на контейнер about, он должен быть видим, а другие контейнеры должны быть скрыты

Fa E Ka · Answer 1 · 2014-02-24T03-26-00.000Z

U может попробовать следующее:

#about_container, #principles_container, #programs_container
    {
        display: none !important;
    }