当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Show and hide child HTML tag based on button click event

问题描述:

this is my code:

 <div id="templatemo_menu">

<ul>

<li><a href="#" class="current">Home</a></li>

<li><a href="#">Login</a></li>

<!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->

<li><a href="#">About</a></li>

<li><a href="#" class="last">Contact Us</a></li>

</ul>

<ul>

<li><a href="#" class="current">Home</a></li>

<li><a href="#">Profile</a></li>

<!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->

<li><a href="#">Leave</a></li>

<li><a href="#">Complaint</a></li>

<li><a href="#" class="last">Resignation</a></li>

</ul>

</div>

</div>

now when employee visits my home page without login in to my site then i want to display this on my menu bar:

 <ul>

<li><a href="#" class="current">Home</a></li>

<li><a href="#">Login</a></li>

<!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->

<li><a href="#">About</a></li>

<li><a href="#" class="last">Contact Us</a></li>

</ul>

and i want to hide this from my menu bar:

 <ul>

<li><a href="#" class="current">Home</a></li>

<li><a href="#">Profile</a></li>

<!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->

<li><a href="#">Leave</a></li>

<li><a href="#">Complaint</a></li>

<li><a href="#" class="last">Resignation</a></li>

</ul>

but when employee login in to my site then i want to display this on my menu bar on my button click event:

 <ul>

<li><a href="#" class="current">Home</a></li>

<li><a href="#">Profile</a></li>

<!--<li><a href="http://www.templatemo.com" target="_parent">Templates</a></li>-->

<li><a href="#">Leave</a></li>

<li><a href="#">Complaint</a></li>

<li><a href="#" class="last">Resignation</a></li>

</ul>

and i want to hide this from my menu bar on button click event:

  • Home
  • Login
  • Templates</a></li>-->

  • About
  • Contact Us

can any one suggest me how to do that???

网友答案:

if you prefer using JavaScript then solution is after click on login:

document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='none';
document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='block';

and if guest user without login go with

document.querySelector('#templatemo_menu ul:nth-child(2)').style.display='none';
document.querySelector('#templatemo_menu ul:nth-child(1)').style.display='block';

Note: But You might want to go for server side solution for checking session or cookie since JavaScript would not work, when user refreshes page.

网友答案:

A trivial solution would be to harness jQuery's $.click() method to detect when your relevant tag has been clicked, then apply a styling which displays your menu. Or better yet, use jQuery's $.toggle to hide and show the menu based on alternating click events, applying and removing the same styling.

If you could place your site into something like a JSFiddle, it would be much simpler for us to see exactly what your markup represents and how to help. Best of luck!

分享给朋友:
您可能感兴趣的文章:
随机阅读: