Onclick event not working - jQuery

366
December 24, 2016, at 4:42 PM

I have some div tags having same class names on side menu and when click on div tag it should load correspoding div tag elements and when i click on other div menu tag the one which opened should hide and show the one which clicked currently.

It's like when click on menuitem(about) on side menu it should load div(about-page) and when click on menuitem(services) on side menu it should load div(services-page) at the same time the div(about-page) which loaded should hide and show 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>

Answer 1

I have added different background colors to different div to show the difference

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

Answer 2

You can do something like this. Provided you add a data-target-class attribute in your links.

<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

You may wish to use data-attributes. You could assign one to each of the links with the name of the div you wish to load.

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

Then you can use these in your JS code.

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

I would look to simplify the block above but just included a simple example that matched your code.

If you add a div say <div id="page-container"></div> (which you would use to container the dynamically loaded pages). You could use Jquery's html function to replace the contents of this div each time.

Rent Charter Buses Company
READ ALSO
Input text and Img reposition with Keyboard in Mobile View

Input text and Img reposition with Keyboard in Mobile View

My element moves with popping up of Android keyboard even with a a fixed positionIs there any way to prevent it?

298
How to build/compile/make a Table of Contents automatically based on a fixed HTML code?

How to build/compile/make a Table of Contents automatically based on a fixed HTML code?

If I have a lot of articles which have various headings, how can I build/compile/make a flexible Table of Contents for all those articles automatically?

333
JQuery not initialized in AngularJS

JQuery not initialized in AngularJS

I am trying to use JQuery in AngularJS

472
How can i get the div text?

How can i get the div text?

I'm trying to create a classroom seats with my HTML and PHP (only loop)Here is My Script

456