根据URL模式更改UI选项卡

时间:2013-03-21 07:44:25

标签: jquery html jquery-ui tabs jquery-tabs

我正在使用Jquery Ui标签框架。我想在浏览器中更改符合URL模式的选定标签,例如www.xyz.com/#tab1或www.xyz.com/#tab2。

我找到了使用

的解决方法
$("#tabs").bind('tabsselect', function(event, ui) {
                window.location.href=ui.tab;

但是,它正在选中标签锚,但实际上并没有更改标签,我必须按回车键才能实际更改标签。有人可以指出我错在哪里,并且可以提示更改,以便标签更改符合URL模式。

我使用以下代码来实现此

 $(document).ready(function() {




   $( "#tabs" ).tabs({
         beforeLoad: function( event, ui )
          {        
          ui.jqXHR.error(function() { 
                   ui.panel.html(            "Couldn't load this tab. We'll try to fix this as soon as possible. "  ); 
                          }); 
                               }    
                               });

            $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;

        });

 });

HTML代码

<div id="tabs">
<ul>
    <li><strong class="first">
    <a href="#tabs1" id="tab1">Tab-1</a>
    </strong></li>
<li>
<strong>
<a href="xyz.do" id="tab2">Tab-2</a>
</strong>
</li>

</ul>

<div id="tabs1">
tab -1 content
</div>

1 个答案:

答案 0 :(得分:0)

我认为您可能希望通过激活处理程序进行绑定。 http://api.jqueryui.com/tabs/#event-activate

$( ".selector" ).on( "tabsactivate", function( event, ui ) { changeColor(ui); } );

ui.tab将包含有关所单击选项卡的详细信息。

在你的情况下,我想你会想说

    var changeColor(ui) = function(
    if (ui.index == 1) { 
       $("#selector").addClass("tab2Active"); 
    });