2

在阅读了所有 jQuery 文档、SO 问题和随机博客之后，我一直无法找到我的问题的答案。

目前，我正在将 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 按预期隐藏和显示。我遇到的问题是div id="fragment-1"在每个部分的每个页面上都选择了该问题。（例如，在“工具”部分中div id="fragment-4"，我需要选择它。我尝试$('#tabs').tabs('option', 'selected', 3);在 .aspx 页面的头部和母版页中都添加以进行测试，但出现错误。此外，我尝试将$('#tabs').tabs('option', 'selected', 3);其放入$(document).ready 函数，它仍然会在 .aspx 页面和母版页中引发错误。

解决上述问题： 放置

<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加载，但我需要用户，当点击标签被带到不同的页面时。我认为这类似于窗口。地点（）。

有人可以帮忙看第二部分吗？我是一个 jQuery n00b。

4

3 回答 3

2

对于第一部分，您可以按照 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);

现在是第二个问题：如果我理解正确，您希望人们点击标签的名称并被重定向？这可以通过绑定点击事件来完成。您必须首先为导航中的每个 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）

于 2010-01-06T18:17:56.173 回答
0

你有没有尝试过：

  $(document).ready(function(){
    var $tabs = $("#tabs").tabs({event: 'mouseover'});
    $tabs.tabs("select", 3);
  });
于 2010-01-06T14:00:52.000 回答
0 
.tabcontainer:not(:target) { display: none; }
于 2010-01-06T14:41:10.887 回答