創建頁面導航無法隱藏和顯示容器

我試圖做一個單一的頁面導航，但無法顯示或隱藏其他容器。創建頁面導航無法隱藏和顯示容器

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>

來源

2014-02-24 carrieat

請提供的jsfiddle試玩！ –

這裏是小提琴http://jsfiddle.net/3432c/。默認情況下應該可見家用容器。當有人點擊有關容器應該是可見的，其他容器應該隱藏 – carrieat

U可以試試這個：

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

來源

2014-02-24 05:35:09

創建頁面導航無法隱藏和顯示容器

回答

相關問題