在加载页面上显示div菜单

时间:2016-03-20 10:56:14

标签: jquery html css show-hide

我有这个功能,它在单击链接时显示div。效果很好,但我希望这是一个菜单。显示div后,它会链接到另一个页面。哪个再次正常工作,但一旦页面加载,我希望div仍然显示,使用当前菜单列表。加载新页面时会隐藏它。这是我拼凑在一起的代码。任何想法?

$('#menu a').click(function(e){
  hideContentDivs();
  var tmp_div = $(this).attr('id');

  ($('.somthing').find('.'+tmp_div)).show();
});

function hideContentDivs(){
  $('.somthing div').each(function(){
    $(this).hide();});
}
hideContentDivs();
#menu ul {
  list-style-image: url('socialicons/webicon-aboutme.png');
  margin: 0;
  padding: 0;
}

.somthing{
  padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <p class="paragraph material_left_menu_header_para"><span class="Small_Header_Text">Marine Vinyls</span></p>
    <a class="link-text material_link_container" href="javascript:void(0)"id="CTP_Marine_Vinyls"><span class="text-link-text-1">CTP Marine Vinyls</span></a>
    <a class="link-text material_link_container" href="javascript:void(0)"id="Nautolex_Vinyls"><span class="text-link-text-1">Nautolex Vinyls</span></a>
    <p class="paragraph material_left_menu_header_para"><span class="Small_Header_Text">Fabrics</span></p>
    <a class="link-text material_link_container" href="javascript:void(0)"id="AGUA"><span class="text-link-text-1">AGUA</span></a>
    <a class="link-text material_link_container" href="javascript:void(0)"id="CoverTex"><span class="text-link-text-1">CoverTex</span></a>
    <p class="paragraph material_left_menu_header_para"><span class="Small_Header_Text">Acrylics</span></p>
    <a class="link-text material_link_container" href="javascript:void(0)"id="TopGun"><span class="text-link-text-1">Topgun</span></a>
    <a class="link-text material_link_container" href="javascript:void(0)"id="Odyssey"><span class="text-link-text-1">Odyssey</span></a>
    <a class="link-text material_link_container" href="javascript:void(0)" id="Acrylic_Canvas"><span class="text-link-text-1">Acrylic Canvas</span></a>
  </ul>
</div>
<div class="somthing">
  <div class="CTP_Marine_Vinyls" class="content">
    <br>
    <p class="paragraph material_left_menu_header_para"><span class="Small_Header_Text">CTP_Marine_Vinyls</span></p>
    <a class="link-text material_link_container" href="#" id="CTP_Marine_Vinyls"><span class="text-link-text-1">Zander</span></a>
  </div>
  <div class="Nautolex_Vinyls" class="content">
    <br>
    <p class="paragraph material_left_menu_header_para"><span class="Small_Header_Text">Nautolex_Vinyls</span></p>
    <a class="link-text material_link_container" href="#" id="Acrylic_Canvas"><span class="text-link-text-1">Acrylic Canvas</span></a>
  </div>
  <div class="AGUA" class="content">
    <br> 
    <p class="paragraph material_left_menu_header_para"><span class="Small_Header_Text">AGUA</span></p>
    <a class="link-text material_link_container" href="../../material_pages/Agua_Range/Vistas_Collection.php" id="Acrylic_Canvas"><span class="text-link-text-1">Vistas_Collection</span></a>
  </div>
</div>

0 个答案:

没有答案