Вкладки пользовательского интерфейса jQuery переходят к определенному элементу div во вкладке - PullRequest
Новая
       12

Вкладки пользовательского интерфейса jQuery переходят к определенному элементу div во вкладке

5 голосов
/ 14 апреля 2011

У меня есть базовые настройки вкладок с использованием JqueryUI (упрощено только для двух соответствующих вкладок) 

 <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Home</a></li>
            <li><a href="#tabs-5">Benefits</a></li>

        </ul>
        <div id="tabs-1">
            <UCHome:UCHome runat="server" />
        </div>
        <div id="tabs-5">
            <UCBenefits:UCBenefits runat="server" />
        </div>
</div>

В пользовательском контроле для вкладок-1 (упрощено до соответствующего кода) 

<a class="benefitc" href="#benefitsmodularity">
     <span>Modularity</span>
     <asp:Image runat="server" ImageUrl="../Images/Benefits1.png"/></a> 
<a class="benefitc" href="#benefitsflexibility>
    <span>Flexibility</span><asp:Image runat="server" ImageUrl="../Images/Benefits2.png" /></a>

В пользовательском контроле для вкладок-5 (опять упрощенно) 

<div class="homecontent">
    <div id="benefitsmodularity">
        <h2>
            (Modularity)</h2>
        <p>
            Hello
        </p>
    </div>
</div>
<div class="homecontent">
    <div id="benefitsflexibility">
        <h2>
            (Flexibility)</h2>
        <p>
             World
        </p>
    </div>
</div>

Домашний класс просто для стайлинга.

Теперь, в основном, я хочу перенаправить с tabs-1 на tabs-5, когда пользователь щелкает изображение на tabs-1, и я хочу, чтобы он переходил в div, относящийся к изображению. Например, если пользователь нажимает Benefits2.png, я хочу, чтобы он перешел на вкладки 5 и сосредоточился на этом.

Пока что у меня есть в документе. 

var $tabs = $("#tabs").tabs();

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

Это приводит меня к вкладке правильно, но я не могу понять, как добраться до правильного div. Обратите внимание, что все щелчки должны перевести меня на вкладки 5, индекс 4. 4. 1017 *

Любая помощь будет высоко ценится. Пожалуйста, дайте мне знать, если я не достаточно ясно по этому вопросу.

Ответы [ 3 ]

5 голосов
/ 16 апреля 2013

Опция active также может быть использована для установки активной вкладки (примечание - активная вкладка может использоваться по-разному, когда ей присваивается логическое значение, а значение свернутый - true): http://api.jqueryui.com/tabs/#option-active
[текст ниже принятссылка сверху, измененный формат]

active - Какая панель в данный момент открыта. Тип: Логическое или Целое число. По умолчанию: 0

Примеры кода:
Инициализировать вкладки с указанным активным параметром: 

        $( ".selector" ).tabs({ active: 1 });
Получить или установить активный параметр после инициализации: 

        // getter
        var active = $( ".selector" ).tabs( "option", "active" );

        // setter
        $( ".selector" ).tabs( "option", "active", 1 );
5 голосов
/ 15 апреля 2011

Aaaaaaaaaargh сказал обезьяну кода, когда он сделал что-то глупое.

Это было глупо с моей стороны.

Теги привязки работают, но так как я использовал 

$('.benefitc').click(function () { // bind click event to link
   $tabs.tabs('select', 4); // switch to tab
   return false;
});

Возврат false остановил распространение события и действие тегов a по умолчанию никогда не выполнялось.

При изменении значения на 

return true;

достигается желаемый результат.

1 голос
/ 10 ноября 2013

Вот рабочий пример активации определенной вкладки. 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">HOME</a></li>
<li><a href="#tabs-2">About Us</a></li>
<li><a href="#tabs-3">Contact</a></li>
</ul>
<div id="tabs-1">
<p>Home Page</p>
<button>Page 2</button>

<script>
    $( "button" ).click(function() {
    $( "#tabs" ).tabs( "option", "active", 1 );  <!-- Activate Tab Two -->
    alert(" It ran!");
    });
</script>

</div>
<div id="tabs-2">
<p>This is what we are all about.</p>
</div>
<div id="tabs-3">
<p>Name First Last</p>
<p>Town, City, Zip</p>
</div>
</div>
</body>
</html>
...