问题描述:

I have a form with table which class name='color'.I have another div tag for calender.I want to display the calender div which is named as 'cal' over the table 'color' when I click the word 'calender' in side menu.

 $(document).ready(function()

{

$(".aastext").click(function()

{

$(".cal").slideToggle("slow");

});

});

.outer {

margin-left: 20%;

margin-top: 1%;

margin-bottom: 3%;

height: 820px;

width: 60%;

box-shadow: 10px 10px 5px #888888;

border: 1px solid #f9f2f2;

border-radius: 10px;

}

.rest {

padding:7%;

height: 660px;

background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));

background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);

filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");

background: -o-linear-gradient(top, #e5e3e3, ffffff);

background-color: #e5e3e3;

border: 1px solid #f9f2f2;

border-width: 0px 0px 0px 0px;

border-radius: 0px 0px 10px 10px;

padding: 10% 7px;

}

.sidemenu {

float: left;

margin-top: 140px;

width: 100%;

}

.content {

}

.side{

width: 24%;

float: left;

display: inline-block;

}

form[name=profile] p {

padding-left: 20%;

}

hr {

margin: 0;

width: 1px;

height: 700px;

border: 0;

background: #fff;

float: left;

}

.cal{

display:none;

position: absolute;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="outer">

<div class="log">

<!--<h1>Profile</h1> -->

<form method="post" class="lout" ><button class="logout" name="logout" >Logout</button>

</div> <!--End of log div -->

<div class="rest">

<div class="side">

<div class="sidemenu">

<div class="1 menu">

<a href="employee_dashboard.php" class="astext">Profile</a>

</div> <!--End of menu1 --><br>

<div class="2 menu">

<a class="astext">Documents</a>

<ul> <li><a href="onboard_form.php" class="astext">forms</a></li> <li><a href="completed_form.php" class="astext">forms</a></li> </ul>

</div> <!--End of menu 2-->

<div class="3 menu">

<a class="aastext">Calender</a>

</div> <!--End of menu 3-->

<!-- <div class="menu 4">

</div> End of menu 4-->

</div> <!--End of side menu -->

</div> <!--End of side div -->

<hr>

<!-- <div class="heading" >

<h1>Profile</h1>

</div> End of heading div -->

<div class="content">

<form method="post" name="profile"> <h1>Profile </h1><button name="edit" class=edit >Edit</button>

<br><br><br><br>

<table class="color">

<p>name</p>

<p>phone</p>

<p>email</p>

<p>address</p>

<p>street</p>

<p>city</p><br>

</table><div id='cal' class='cal'>

<iframe class="fr" src="" style="border: 1px solid black;" width="450" height="250" frameborder="0" scrolling="no"></iframe>

</div></form></td></tr></table>

</div> <!--End of content -->

</div> <!--End of rest div -->

</div> <!--End of outer div-->

网友答案:

some simple fails i found in your code are:

you should use a href="#" in your <a class="aastext">

you should add a class to your .cal which changes display: none to at least display: block (i.e. showCal, so if you click on aastext it toggles this class, which changes the visibility from display: none to display: block)

this is how your js could look like:

$(document).ready(function()
    {
    $(".aastext").click(function(e)
    {
      e.preventDefault();
        $(".cal").toggleClass("showCal");
    });
});

if you want to place your .cal inside your .color you should literally place it inside your .color and add position: relative to .color

furthermore your table is not properly closed / closed two times and once before your .cal div appears.

maybe you can adjust your fiddle on your own with my input and we'll see where it takes you.

网友答案:

 $(document).ready(function()
    {
    $(".aastext").click(function()
    {
     
      var calndr = $('#cal').html();
     
      $('.color').html(calndr);
      
    });
  });
.outer {
  margin-left: 20%;
  margin-top: 1%;
  margin-bottom: 3%;
  height: 820px;
  width: 60%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  
}
.rest {
  padding:7%;
  height: 660px;

  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  padding: 10% 7px;
}
.sidemenu {
  float: left;
  margin-top: 140px;
  width: 100%;
   }
.content {
  
 
  }
.side{
  width: 24%;
  float: left;
  display: inline-block;
}
 form[name=profile] p {
padding-left: 20%;

}
 hr {
      margin: 0;
      width: 1px;
      height: 700px;
      border: 0;
      background: #fff;
      float: left;
    }
.cal{
 display:none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="aastext">Click</div>
<div class="outer">
                <div class="log">
                <!--<h1>Profile</h1> -->
                       <form method="post" class="lout" ><button class="logout" name="logout" >Logout</button>
                       
                </div> <!--End of log div -->
                <div class="rest">
                  <div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="employee_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 --><br>
                        <div class="2 menu">
                         <a class="astext">Documents</a>
                          <ul>            <li><a href="onboard_form.php" class="astext">forms</a></li>            <li><a href="completed_form.php" class="astext">forms</a></li>          </ul> 
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a class="aastext">Calender</a>
                           
                        </div> <!--End of menu 3-->
                      <!--  <div class="menu 4">
                          </div> End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->
                   <hr>
                   <!--  <div class="heading" >
                         <h1>Profile</h1>
                      </div>    End of heading div -->
                   <div class="content">
                    <form method="post" name="profile">  <h1>Profile </h1><button name="edit" class=edit >Edit</button>
                    <br><br><br><br>
                    <table class="color">
<p>name</p> 
            <p>phone</p> 
            <p>email</p> 
            <p>address</p> 
            <p>street</p> 
            <p>city</p><br>
                </table><div id='cal' class='cal'>
         <iframe class="fr" src="" style="border: 1px solid black;" width="450" height="250" frameborder="0" scrolling="no"></iframe>
       </div></form></td></tr></table>
                   </div> <!--End of content -->
                </div> <!--End of rest div -->
          </div> <!--End of outer div-->
相关阅读:
Top