Question

我正在尝试进行单页导航，但无法显示和隐藏其他容器。

basicall，它是3个链接。我捕获click事件并设置适当的容器隐藏或显示滑动效果。

代码如下所示。谢谢你的帮助。

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

Answer 1

你可以试试这个：

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

创建页面导航无法隐藏和显示容器

1 个答案: