2016-12-24 98 views
2

我有一些div標籤在側面菜單上有相同的類名稱,當點擊div標籤時,它應該加載相應的div標籤元素,當我點擊其他div菜單標籤時應該隱藏打開的標籤顯示當前點擊的那個。Onclick事件不工作 - jQuery

這就像在側面菜單上點擊menuitem(about)時它應該加載div(about-page),並且在側面菜單上點擊menuitem(services)時,它應該同時加載div(services-page)加載的div(about-page)應該隱藏並顯示div(services-page)。

$('.menu-items a').click(function(){ 
 
       $(this).attr('.services-page'); 
 
       $('.services-page').show(); 
 
      });
.about-page { 
 
\t min-height: 80%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.services-page { 
 
\t position: absolute; 
 
} 
 

 
.projects-page { 
 
\t position: absolute; 
 
} 
 

 
.contact-page { 
 
\t position: absolute; 
 
}
<div id="slide-out" class="side-nav-menu fixed"> 
 
     <div class="center"><a href="index.html"><img src="images/Untitled-1.png" style="width:100px;height:auto;margin-top:15px;"></a></div> 
 
     <div class="menu-items"><a href="#!">ABOUT</a></div>   
 
     <div class="menu-items"><a href="#!">SERVICES</a></div>  
 
     <div class="menu-items"><a href="#!">PROJECTS</a></div>  
 
     <div class="menu-items"><a href="#!">CONTACT</a></div>  
 
     </div>               
 
                     
 
                     
 
     <div class="about-page">           
 
      <div class="row">           
 
       <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
      <div class="services-page"> 
 
      <div class="row"> 
 
      <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     
 
      <div class="projects-page"> 
 
      <div class="row"> 
 
      <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
      <div class="contact-page"> 
 
      <div class="row"> 
 
      <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div>

+0

使用切換插件 –

+0

@VijayaVigneshKumar我應該如何加載相應的div標籤,當我點擊菜單項? –

+0

@BunnyJoel:你的帖子不太清楚;你想要達到什麼樣的目標?你面臨的挑戰是什麼? – nyedidikeke

回答

2

我加入了不同的背景顏色,以不同的格以示區別

$('.menu-items a').click(function(){ 
 
    $(".overlay-page").removeClass("active"); 
 
    link="."+$(this).text().toLowerCase()+"-page"; 
 
    $(link).addClass("active"); 
 
});
.about-page { 
 
\t min-height: 80%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 0; 
 
    right: 0; 
 
    display:none; 
 
    background-color:orange; 
 
    z-index:-10; 
 
} 
 

 
.services-page { 
 
min-height: 80%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 0; 
 
    right: 0; 
 
    display:none; 
 
background-color:red; 
 
    z-index:-10; 
 
} 
 

 
.projects-page { 
 
min-height: 80%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 0; 
 
    right: 0; 
 
    display:none; 
 
background-color:yellow; 
 
    z-index:-10; 
 
} 
 

 
.contact-page { 
 
min-height: 80%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 0; 
 
    right: 0; 
 
    display:none; 
 
background-color:green; 
 
    z-index:-10; 
 
} 
 

 
.overlay-page.active{ 
 

 
    display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide-out" class="side-nav-menu fixed"> 
 
     <div class="center"><a href="index.html"> 
 
      <!--<img src="images/Untitled-1.png" style="width:100px;height:auto;margin-top:15px;">--></a></div> 
 
     <div class="menu-items"><a href="#!">ABOUT</a></div>   
 
     <div class="menu-items"><a href="#!">SERVICES</a></div>  
 
     <div class="menu-items"><a href="#!">PROJECTS</a></div>  
 
     <div class="menu-items"><a href="#!">CONTACT</a></div>  
 
     </div>               
 
                     
 
                     
 
     <div class="about-page overlay-page active">           
 
      <div class="row">           
 
       <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
      <div class="services-page overlay-page"> 
 
      <div class="row"> 
 
      <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
     
 
      <div class="projects-page overlay-page"> 
 
      <div class="row"> 
 
      <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
      <div class="contact-page overlay-page"> 
 
      <div class="row"> 
 
      <div class="col l9 s12 m12 offset-l3 white z-depth-3"> 
 
       <p>hi</p> 
 
       </div> 
 
      </div> 
 
     </div>

1

你可以做這樣的事情。假設您在鏈接中添加了數據目標類屬性。

<div id="slide-out" class="side-nav-menu fixed"> 
    <div class="center"><a href="index.html"><img src="images/Untitled-1.png" style="width:100px;height:auto;margin-top:15px;"></a></div> 
    <div class="menu-items"><a href="#!" 
     data-target-class="about-page">ABOUT</a></div>   
    <div class="menu-items"><a href="#!" 
     data-target-class="services-page">SERVICES</a></div>  
    <div class="menu-items"><a href="#!" 
     data-target-class="projects-page">PROJECTS</a></div>  
    <div class="menu-items"><a href="#!" 
     data-target-class="contact-page">CONTACT</a></div>  
    </div> 

$('.menu-items a').click(function(){ 
 
    //Get the class to show    
 
    var targetClass = $(this).data('target-class'); 
 
    //hide all the divs that have a class attribute ending by -page 
 
    $("div[class$='-page']").hide(); 
 

 
    //Show the active classe 
 
    $('.'+ targetClass).show(); 
 

 
});

0

您可能希望使用數據attri butes。您可以爲每個鏈接指定一個您想要加載的div的名稱。

<div class="menu-items"><a href="#!" data-page="about-page">ABOUT</a></div> 

然後你可以在你的JS代碼中使用這些。

$('.menu-items a').click(function(){ 
    var pageToLoadClassName = $(this).data('page'); 
    $('.about-page').hide(); 
    $('.services-page').hide(); 
    $('.projects-page').hide(); 
    $('.contacts-page').hide(); 
    $('.' + pageToLoadClassName).show(); 
}); 

我想要簡化上面的代碼塊,但只是包含一個簡單的例子來匹配您的代碼。

如果您添加一個div,例如<div id="page-container"></div>(您將用它來容納動態加載的頁面)。你可以使用Jquery的html函數來替換每次div的內容。