Onclick事件不起作用-jQuery

兔子乔尔

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

这就像在侧面菜单上单击menuitem（about）时应加载div（about-page），在侧面菜单上单击menuitem（services）时应同时加载div（services-page）div（about-加载的页面应隐藏并显示div（services-page）。

 $('.menu-items a').click(function(){
                $(this).attr('.services-page');
                 $('.services-page').show();
             });

.about-page {
	min-height: 80%;
    width: 100%;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
}

.services-page {
	position: absolute;
}

.projects-page {
	position: absolute;
}

.contact-page {
	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>

ab29007

我向不同的div添加了不同的背景颜色以显示差异

$('.menu-items a').click(function(){
   $(".overlay-page").removeClass("active");
   link="."+$(this).text().toLowerCase()+"-page";
   $(link).addClass("active");
 });

.about-page {
	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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。