Question

我正在Wordpress上建立一个房地产网站，并且一直在做一些简单的HTML，CSS＆amp; JS我自己。对于这些东西，我是一个完整的新手，但直到现在才开始......

我构建了此Tab / Sub-Tab菜单，以显示任何特定属性的任何活动列表。该结构以两个父标签菜单“FOR SALE”＆amp; “出租”。这些父菜单中的每一个都具有子标签菜单“ALL”，“1BR”，“2BR”和＆amp; “3BR +”。

我在Wordpress中使用可视化合成器构建了父选项卡，但它不允许我在选项卡元素中嵌套选项卡元素，因此对于第二个或子选项卡菜单，我必须从头开始从我在线找到的教程中构建它使用非常基本的JavaScript。在页面初始到达时，“FOR SALE”＆gt; “所有”菜单处于活动状态并且显示清单。

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

默认情况下，我希望子菜单标签“ALL”处于有效状态，并在您点击“FOR SALE”或“FOR RENT”时显示列表。如果它记住用户在两个父项之间来回切换时用户所在的子菜单，那将会有什么好处。

请帮忙！

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>

Answer 1

html中的'RENT'或'SALE'标签在哪里？假设您有一个RENT的块和另一个SALE的块，其公共类为'rentsale'。然后在javascript中你可以把它写成：

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

在$(".tab_content:first").show();

之后的第三行写入文档内部

如果您有html中的'出租'和'出售'等出租和销售区块的ID，请写下

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

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

返回到该父菜单

1 个答案: