jQuery Tabs. , , Мне нужно сделать все это !!! (MouseOver, переход от вкладки к щелчку и сохранение выбранных вкладок на основе страницы)

Question

Прочитав все документы 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-загрузка, но мне нужно, чтобы пользователь при нажатии на вкладку переходил на другую страницу. Я бы предположил, что это будет аналогичен window.location ().

Может кто-нибудь помочь со второй частью? Я JQuery N00B.

Answer 1

Для первой части вы можете сделать то, что предложил 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 в вашей навигации:

<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>

Затем создайте функцию, которая возьмет этот идентификатор и решит, куда отправить пользователя:

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
    }
}

А затем привязать его к:

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

(я не проверял ничего из этого: P)

Answer 2

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

Answer 3

Вы пробовали:

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