Onclick事件不工作 - jQuery

Question

我有一些div标签在侧面菜单上有相同的类名称，当点击div标签时，它应该加载相应的div标签元素，当我点击其他div菜单标签时应该隐藏打开的标签显示当前点击的那个。

这就像在侧面菜单上点击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>

Answer 1

我加入了不同的背景颜色，以不同的格以示区别

$('.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>

Answer 2

你可以做这样的事情。假设您在链接中添加了数据目标类属性。

<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(); 
 

 
});

Answer 3

您可能希望使用数据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的内容。