Переход на следующий таб при нажатии на ссылку

Question

Переход на следующий таб при нажатии на ссылку

Рейтинг: 0Ответов: 1Опубликовано: 26.03.2015

Здравствуйте!

Имеется код:

<div class="section">

<ul class="tabs">
    <li class="current">Первая вкладка</li>
    <li>Вторая вкладка</li>
</ul>

<div class="box">

    <p><a href="этажеСтраница.php?god='.$param.'">$param</p>
</div>

<div class="box">
<?php   if (isset($_GET['god']))
    {
        echo'
    <p>Текст 1</p>';
         }
     else {
            echo '  <p>Текст 2</p>';
            }
 ?>
 </div>

 </div><!-- .section -->

И соответственно файл js:

(function($) {
$(function() {

$('ul.tabs').each(function(i) {
    var storage = localStorage.getItem('tab'+i);
    if (storage)       $(this).find('li').eq(storage).addClass('current').siblings().removeClass('current')
        .parents('div.section').find('div.box').hide().eq(storage).show();
})

$('ul.tabs').on('click', 'li:not(.current)', function() {
    $(this).addClass('current').siblings().removeClass('current')
        .parents('div.section').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
    var ulIndex = $('ul.tabs').index($(this).parents('ul.tabs'));
    localStorage.removeItem('tab'+ulIndex);
    localStorage.setItem('tab'+ulIndex, $(this).index());
})

})
})(jQuery)

Немогу понять, как сделать так, чтобы при нажатии на param автоматически открывало вторую вкладку с Текст 1.

javascript jquery php

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Узнаю знакомый по другому заданию код, js, мне кажется, почти такой же, как там. И в том задании я его переписал в более удобочитаемый вид, поэтому решил сделать решение на основе того переделанного кода, так как использовать текущий код для добавления нужного функционала, это разрыв мозга.

Не очень понял, зачем вам в ссылке на следующий таб код PHP, что именно вы хотите передавать этим кодом.

Если делать без PHP, то получается такой код на JS, все манипуляции с меню сохраняются в localStorage, что позволяет при обновлении страницы оставаться на том табе, который был активен перед обновлением:

$(document).ready(function() {

    // Загрузка из localStorage сохранённого пункта меню и открытие его
    var storage = localStorage.getItem('item');
    if (storage && storage !== "#") {
        $('.nav-tabs a[href="' + storage + '"]').tab('show');
    }

    // Функция клика на произвольный пункт меню
    $('ul.nav').on('click', 'li:not(.active, .dropdown, .disabled, .divider)', function()      {
        var itemId = $(this).find('a').attr('href');
        localStorage.setItem('item', itemId);
    });

    var list = $('ul.nav').find('li');

    var length = list.length - 1;

    // Функция клика на кнопку Next
    $('.next').click(function() {
        list.each(function(i) {
            if($(this).hasClass('active') && !$(this).hasClass('dropdown'))     {
                if (i != length) {
                    $(this).removeClass('active');                
                    searchValidItem(i);
                    return false;
                } else {
                    $(this).removeClass('active');                
                    searchValidItem(-1);
                    return false;
                }
            }
        });
    });
});

// Функция для определения следующего подходящего пункта в меню
var searchValidItem = function(index) {
    var list = $('ul.nav').find('li');
    var nextIndex = index+1;
    var nextItem = list.eq(nextIndex);
    if (!nextItem.hasClass("disabled") && !nextItem.hasClass("dropdown") && !nextItem.hasClass("divider")) {
        nextItem.find("a").tab('show');
        localStorage.setItem('item', nextItem.find('a').attr('href'));
    } else {
        searchValidItem(nextIndex);
    }
};

Пример сделал на основе своего кода из задания по ссылке выше. Сделал также циклическое переключение табов, думаю, не помешает. :)

Переход на следующий таб при нажатии на ссылку

Ответы