返回到父菜单时保持标签菜单 li 子菜单处于活动状态

Question

我正在 Wordpress 上建立一个房地产网站，并且一直在自己做一些简单的 HTML、CSS 和 JS。谈到这些东西，我是一个完全的新手，但一直到现在......直到现在。

我构建了这个选项卡/子选项卡菜单来显示任何特定属性的任何活动列表。该结构以两个父选项卡菜单“待售”和“待租”开始。这些父菜单中的每一个都有子选项卡菜单“ALL”、“1BR”、“2BR”和“3BR+”。

我在 Wordpress 中使用可视化编辑器构建了父选项卡，但它不允许我将选项卡元素嵌套在选项卡元素中，因此对于第二个或子选项卡菜单，我必须从网上找到的教程从头开始构建它使用非常基本的javascript。首次到达页面后，“待售”>“全部”菜单处于活动状态，并且可以很好地显示列表。

问题：当您导航到“FOR RENT”查看列表时，没有任何子菜单处于活动状态或显示列表。用户必须实际单击四个子菜单选项之一才能查看可用性。当您返回“待售”时也会发生同样的情况。

默认情况下，我希望子菜单选项卡“全部”处于活动状态并在您单击“待售”或“待租”时显示列表。如果用户在两个父项之间来回切换时，它可以记住用户在哪个子菜单上，这将是一个加分项。

请帮忙！

链接：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>

Answer 1

html 中的“出租”或“销售”标签在哪里？？？ 假设您有一个用于 RENT 的块和另一个用于 SALE 的块，其公共类为“rentsale”。然后在javascript中你可以写成：

$('.rentsale').on('click',function(e){
 $(this).find('ul.tabs li:first-child').trigger('click');
})

在$(".tab_content:first").show();之后的第三行写在document.ready里面

如果您在 html 中有 'rent' 和 'sale' 之类的 id 用于出租和销售块，请编写

$('#rent,#sale').on('click',function(e){
 $(this).find('ul.tabs li:first-child').trigger('click');
})

如果您有 RENT 和 SALE 父标签的类或 ID，我希望这可以解决您的问题。