javascript - Keep tab menu li child active when returned back to that parent menu -
i'm building real estate site on wordpress , have been doing light html, css & js on own. i'm complete novice when comes stuff, have been getting by..... until now.
i built tab / sub-tab menu display active listings @ particular property. structure starts 2 parent tab menus "for sale" & "for rent". each of parent menus have sub-tab menus "all", "1br", "2br" & "3br+".
i built parent tabs visual composer in wordpress, not allow me nest tab elements within tab elements, second or sub-tab menu had build scratch tutorial found online using basic javascript. upon initial arrival of page, "for sale" > "all" menus active , showing listings well.
the problem: when navigate view listings "for rent" none of sub-menus active or displaying listings. user has click on 1 of 4 sub-menu options see availability. same happens when go "for sale".
i want, default, sub-menu tab "all" active , showing listings when click "for sale" or "for rent". plus on if remembered sub-menu user on if switching , forth between 2 parent items.
please help!
link: http://www.eastvalleyurban.com/blank-community-template-2
javascript:
<script type="text/javascript"> $(document).ready(function() { $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeclass("active"); $(this).addclass("active"); $(".tab_content").hide(); var activetab = $(this).attr("rel"); $("#"+activetab).fadein(); }); }); </script>
html:
<ul class="tabs"> <li class="active" rel="tab5">all</li> <li rel="tab6">1br</li> <li rel="tab7">2br</li> <li rel="tab8">3br</li> </ul> <div class="tab_container"> <div id="tab5" class="tab_content"> <script charset="utf-8" type="text/javascript" id="idxwidgetsrc-45380" src="http://www.eastvalleyurban.idxbroker.com/idx/customshowcasejs.php?widgetid=45380"></script> </div><!-- #tab5 --> <div id="tab6" class="tab_content"> [for rent - 1br content] </div><!-- #tab6 --> <div id="tab7" class="tab_content"> [for rent - 2br content] </div><!-- #tab7 --> <div id="tab8" class="tab_content"> <script charset="utf-8" type="text/javascript" id="idxwidgetsrc-45381" src="http://www.eastvalleyurban.idxbroker.com/idx/customshowcasejs.php?widgetid=45381"></script> </div><!-- #tab8 --> </div>
where 'rent' or 'sale' tab in html??? assuming have block rent , sale common class 'rentsale'. in javascript can write :
$('.rentsale').on('click',function(e){ $(this).find('ul.tabs li:first-child').trigger('click'); })
write inside document.ready @ third line after $(".tab_content:first").show();
if have ids 'rent' , 'sale' in html rent , sale block write
$('#rent,#sale').on('click',function(e){ $(this).find('ul.tabs li:first-child').trigger('click'); })
i hope solves problem if have class or id of rent , sale parent tabs.
Comments
Post a Comment