我应该从其他页面点击时选择标签

时间:2014-05-29 05:29:09

标签: javascript jquery html css

主页

<h1>Our Services</h1>
<ul>
<li><a href="services.html">Project Management</a></li>
<li><a href="services.html">Land Development Management</a></li>
<li><a href="services.html">Site Selection and Transaction<br /> Due Diligence</a></li>
<li><a href="rservices.html">Relocation Management</a></li>
<li><a href="services.html">Construction Claims Assessment</a></li>
<li><a href="services.html">Supplier Procurement Management</a></li>
<li><a href="services.html">Scheduling</a></li>
<li><a href="services.html">Sustainable Service Management</a></li>
</ul>

我想点击锚标记并转到service.html页面。 想要选择我在主页上选择的相应选项卡。 如果我使用services.html#tabs-2作为链接,那么它工作正常,然后去  相应的标签但我不想将我的链接作为services.html#tabs-2。它应该是services.html。

                               ** Service Page **
                    **It works fine when i click on tabbing.**



<script>
  $(function () {
    $( "#tabs" ).tabs();

  });
</script>
   <script>  
   $(function () { 
    //Get the first tab in document and will assume will always use first one
    var selectedTab = $(document).find('div[class^="ui-tabs"]').first();

    //Navigation button, select tab when button click.
    $(".Footer").on('click', ':button', function () {
        var selected = selectedTab.tabs("option", "active");
        if (this.id == "btnMoveLeftTab") {
            if (selected >= 1) {
                selectedTab.tabs("option", "active", selected - 1);
            }
        } else {
            selectedTab.tabs("option", "active", selected + 1);
        }
    });
    //Tab activated, only display next on first tab, and previous in last tab
    selectedTab.tabs({
        activate: function (event, ui) { 
            var active = selectedTab.tabs("option", "active");
            var selected = selectedTab.tabs("option", "active");

            if (active == 0) {
                $("#btnMoveLeftTab").hide();
            }else if (selectedTab.find("li:not(li[style='display:none'])").size()-1 == selected){
                $("#btnMoveRightTab").hide();
            }else{
                $("#btnMoveLeftTab").show();
                $("#btnMoveRightTab").show();
            }
        }
    });
    //First time loading hide the previous button
    $("#btnMoveLeftTab").hide();
  });</script>

   <ul class="resp-tabs-list">
            <h3 class="main_h3_li">Services Offered</h3>
            <span class="full_h">CLICK AN ITEM BELOW FOR DETAILS</span>

            ** Tabbing Start From Here **


        <div class="clear"></div>
            <li role="tab" aria-controls="tab_item-0" class="resp-tab-item resp-tab-active"><a href="#tabs-1">Project Management</a></li>
            <li role="tab" aria-controls="tab_item-1" class="resp-tab-item"><a href="#tabs-2">Land Development Management</a></li>
            <li role="tab" aria-controls="tab_item-2" class="resp-tab-item"><a href="#tabs-3">Site Selection and Transaction   Due Diligence</a></li>
            <li role="tab" aria-controls="tab_item-3" class="resp-tab-item"><a href="#tabs-4">Relocation Management</a></li>
            <li role="tab" aria-controls="tab_item-4" class="resp-tab-item resp-tab-active"><a href="#tabs-5">Construction Claim Assessmen</a></li>
            <li role="tab" aria-controls="tab_item-5" class="resp-tab-item"><a href="#tabs-6">Supplier Procurement Management</a></li>
            <li role="tab" aria-controls="tab_item-6" class="resp-tab-item"><a href="#tabs-7">Scheduling </a></li>
            <li role="tab" aria-controls="tab_item-7" class="resp-tab-item"><a href="#tabs-8">Sustainable Service Manageme</a></li>
                        </ul>

0 个答案:

没有答案
相关问题