CODEWITHSUNDEEP
jqueryhtml
Bunny Joel
Bunny Joel

Reputation: 171

Onclick event not working - jQuery

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>

Upvotes: 2

Views: 56

Answers (3)

dading84
dading84

Reputation: 1218

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.

Upvotes: 0

S&#233;bastien Maloron
S&#233;bastien Maloron

Reputation: 441

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

});

Upvotes: 1

ab29007
ab29007

Reputation: 7756

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>

Upvotes: 2

Related Questions