代码之家 › 专栏 › 技术社区 › andrewWinn

jQuery选项卡。…我要全部做!!!!(鼠标悬停,从选项卡导航,单击并根据页面保持选定的选项卡)

default-selected tabs navigation jquery

andrewWinn · 技术社区 · 16 年前

在阅读了所有jquery文档、问题和随机博客之后,我找不到问题的答案。

目前我正在将ColdFusion站点移植到.NET站点。在我的网站主页中,我拥有所有的导航元素,因为它只是网站的管理部分。

导航HTML代码:

<div id="tabs" class="basictab">
                    <ul>
                        <li><a href="#fragment-1"><span>Insurance Plans</span></a></li>
                        <li><a href="#fragment-2"><span>Mini-Sites</span></a></li>
                        <li><a href="#fragment-3"><span>Independent Sites</span></a></li>
                        <li><a href="#fragment-4"><span>Tools</span></a></li>
                    </ul>

                    <div id="fragment-1" class="tabcontainer">
                        <nav:insurance runat="server" ID="ins1" Visible="true" />
                    </div>
                    <div id="fragment-2" class="tabcontainer">
                        <nav:mini runat="server" ID="mini1" Visible="true" />
                    </div>
                    <div id="fragment-3" class="tabcontainer">
                       <div>
                    <div id="fragment-4" class="tabcontainer">
                      <nav:tools runat="server" ID="tools2" Visible="true" />
                    </div>
                </div>

在我的页眉里 我的母版页 :

<script type="text/javascript" >
  $(document).ready(function(){
    $("#tabs").tabs({event: 'mouseover'});
  });
    </script>

如你所知,这个网站有4个(实际上是3个)主要部分:保险计划、小型网站、独立网站和工具。在这些部分的每一部分下面都有几个页面(所有页面都使用相同的母版页)。

鼠标悬停功能很好,按预期隐藏和显示。我遇到的问题是 div id="fragment-1" 在每个页面上为每个节选择。(例如,在“工具”部分中, div id="fragment-4" ,我需要选择它。我已经尝试添加 $('#tabs').tabs('option', 'selected', 3); 在.aspx页面的头部和用于测试的母版页中,我都会得到一个错误。另外,我试过扔 $(tabs').tabs(“选项”,“选定”,3); 在$(document).ready函数中,它仍然会在.aspx页和masterpage中抛出一个错误。

解决上述问题: 放置

<script type="text/javascript" >
$(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });
    </script>

在“3”部分的页面末尾,允许默认选择相应的选项卡。

删除时:

<script type="text/javascript" >
$(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
   });
    </script>

从母版页的标题。

最重要的是,我需要可以点击的标签导航(不是Ajax加载,但我需要用户,当点击标签时,将带到一个不同的页面。我假设这类似于window.location()。

有人能帮忙做第二部分吗?我是jquery n00b。

3 回复 | 直到 16 年前

Januz 16 年前

在第一部分中,您可以按照Karim79的建议进行操作,并尝试找出它是什么页面,并相应地设置默认值。

这在设置选项卡之前进行:

var path = window.location.pathname.split('/'); // This will give you an 
                                                // array of the parts of the url

var defaultTab;  // Initialize the default tab variable 

// Just as an example, let's imagine your urls look like this:
// administration/mini-site
switch ( path[1] ) // Path[0] is 'administration' in this example
{
   case 'mini-site':
      defaultTab = 1; // The number to pass as the default
   break;

   case 'insurance-plans':
      defaultTab = 5; 
   break;   

// etc. etc. etc. 
// A case for each individual page
}

然后你可以做:

 var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", defaultTab);

现在为 第二个问题 : 如果我理解正确,你想让人们点击标签的名字并重新定向? 这可以通过绑定click事件来完成。您必须首先为导航中的每个a分配一个ID:

<li><a href="#fragment-1" id="insurance"><span>Insurance Plans</span></a></li>
<li><a href="#fragment-2" id="minisites"><span>Mini-Sites</span></a></li>

然后生成一个函数,该函数将获取该ID并决定将用户发送到哪里:

function redirect(e)
{
    var id = $(this).attr('id');

    switch (id)
    {
        case 'minisites':
            window.location = 'http://www.something.com/administration/mini-sites';
        break;

        case 'insurance':
            window.location = 'http://www.something.com/administration/insurance';
        break;
        //etc etc etc
    }
}

然后将其绑定到a:

$('#tabs a').bind('click', redirect);

(但我没有测试任何一个:p)

karim79 16 年前

你试过了吗?

  $(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });

Anonymous 16 年前

.tabcontainer:not(:target) { display: none; }