admin管理员组

文章数量:1024123

I have jQuery UI tabs on my page, but I would like to use them as a navigation between the pages and not like showing and hiding divs as it was designed to. So basically I still want to use jQuery UI tabs but for global navigation and the correct highlighting.

Anyone could help me with this?

I can navigate already, but I'm still kinda stuck on highlighting the correct item in the following page. Any ideas how to achieve that?

$(document).ready(function() {
  var iSelectedTab = $('div#tabs ul a').filter('a[href="#"]');
  $("#tabs").tabs({
    selected: iSelectedTab,
    select: function (e, ui) {
      window.location.href=ui.tab.href;
    }
  });
});

But it isn't working. Any ideas?

I have jQuery UI tabs on my page, but I would like to use them as a navigation between the pages and not like showing and hiding divs as it was designed to. So basically I still want to use jQuery UI tabs but for global navigation and the correct highlighting.

Anyone could help me with this?

I can navigate already, but I'm still kinda stuck on highlighting the correct item in the following page. Any ideas how to achieve that?

$(document).ready(function() {
  var iSelectedTab = $('div#tabs ul a').filter('a[href="#"]');
  $("#tabs").tabs({
    selected: iSelectedTab,
    select: function (e, ui) {
      window.location.href=ui.tab.href;
    }
  });
});

But it isn't working. Any ideas?

  • javascript
  • jquery-ui
  • http-redirect
  • tabs
Share Improve this question edited Nov 19, 2012 at 8:00 dda 6,2132 gold badges27 silver badges35 bronze badges asked Nov 19, 2012 at 7:51 AlnedruAlnedru 2,6559 gold badges53 silver badges92 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 3

I don't see the point of using the Tabs in this case...but to answer your question...

Say that we are in page1.html - for which you need tabs-0 to be active, your tabs structure should be like this (yes - it will not respect the standard structure of Jquery UI tabs):

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">Page 1</a></li>
       <li><a href="page2.html#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-1">This is page 1</div>
</div>

Note that there is no other tab containers in this page. page2.html would have the same structure as above

<div id="tabs">
    <ul>
       <li><a href="page1.html#tabs-1">Page 1</a></li>
       <li><a href="#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-2">This is page 2</div>
</div>

At this point, you don't need any special JS code, 

$("#tabs").tabs({
    select: function (e, ui) {
        window.location.href=ui.tab.href;
    }
});

I have jQuery UI tabs on my page, but I would like to use them as a navigation between the pages and not like showing and hiding divs as it was designed to. So basically I still want to use jQuery UI tabs but for global navigation and the correct highlighting.

Anyone could help me with this?

I can navigate already, but I'm still kinda stuck on highlighting the correct item in the following page. Any ideas how to achieve that?

$(document).ready(function() {
  var iSelectedTab = $('div#tabs ul a').filter('a[href="#"]');
  $("#tabs").tabs({
    selected: iSelectedTab,
    select: function (e, ui) {
      window.location.href=ui.tab.href;
    }
  });
});

But it isn't working. Any ideas?

I have jQuery UI tabs on my page, but I would like to use them as a navigation between the pages and not like showing and hiding divs as it was designed to. So basically I still want to use jQuery UI tabs but for global navigation and the correct highlighting.

Anyone could help me with this?

I can navigate already, but I'm still kinda stuck on highlighting the correct item in the following page. Any ideas how to achieve that?

$(document).ready(function() {
  var iSelectedTab = $('div#tabs ul a').filter('a[href="#"]');
  $("#tabs").tabs({
    selected: iSelectedTab,
    select: function (e, ui) {
      window.location.href=ui.tab.href;
    }
  });
});

But it isn't working. Any ideas?

  • javascript
  • jquery-ui
  • http-redirect
  • tabs
Share Improve this question edited Nov 19, 2012 at 8:00 dda 6,2132 gold badges27 silver badges35 bronze badges asked Nov 19, 2012 at 7:51 AlnedruAlnedru 2,6559 gold badges53 silver badges92 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 3

I don't see the point of using the Tabs in this case...but to answer your question...

Say that we are in page1.html - for which you need tabs-0 to be active, your tabs structure should be like this (yes - it will not respect the standard structure of Jquery UI tabs):

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">Page 1</a></li>
       <li><a href="page2.html#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-1">This is page 1</div>
</div>

Note that there is no other tab containers in this page. page2.html would have the same structure as above

<div id="tabs">
    <ul>
       <li><a href="page1.html#tabs-1">Page 1</a></li>
       <li><a href="#tabs-2">Page 2</a></li>
       <li><a href="page3.html#tabs-3">Page 3</a></li>
    </ul>
    <div id="tabs-2">This is page 2</div>
</div>

At this point, you don't need any special JS code, 

$("#tabs").tabs({
    select: function (e, ui) {
        window.location.href=ui.tab.href;
    }
});

本文标签： javascriptRedirecting to another page with jQuery UI tabsStack Overflow

版权声明：本文标题：javascript - Redirecting to another page with jQuery UI tabs - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745607087a2158787.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。