Question

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

当点击侧面菜单上的menuitem（about）时，它应该加载div（about-page），当点击侧面菜单上的menuitem（服务）时，它应该加载div（services-page）同时加载的div（about-page）应隐藏并显示div（services-page）。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

 <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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 2

你可以这样做。如果您在链接中添加了data-target-class属性。

<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

您可能希望使用数据属性。您可以使用要加载的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的内容。

Onclick事件不起作用 - jQuery

3 个答案: