предотвратить переход на верх страницы при использовании вкладок Jquery - PullRequest
Новая
       9

предотвратить переход на верх страницы при использовании вкладок Jquery

0 голосов
/ 08 декабря 2011

Я создал вкладки, используя jquery, и каждый раз, когда я переключаюсь на другую вкладку, она переходит в верхнюю часть страницы.Есть ли способ, которым я могу предотвратить это?Вот код: 

$(document).ready(function() {

    $('.display_menu_element a').click(function(){
        switch_tabs($(this));
            return false;
    });

    switch_tabs($('.defaulttab'));

});

function switch_tabs(obj)
{
    $('.display_tab').hide();
    $('.display_menu_element a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).fadeIn(1200);
    obj.addClass("selected");

    return false;

}

1 Ответ

0 голосов
/ 08 декабря 2011

Это происходит потому, что когда вы нажимаете на «вкладку», вы в основном нажимаете на якорь (тег), для «href» тега «a» необходимо установить идентификатор элемента div, к которому он относится.

Пожалуйста, смотрите документацию и демонстрацию http://jqueryui.com/demos/tabs/

Более подробную информацию, рассмотрите простую демонстрацию вкладок, ниже приведены пункты списка, которые содержат "вкладки", на которыхпользователь нажимает, если пользователь нажимает на «Nunc tincidunt», первую вкладку с атрибутом «href», установленным на «# tabs-1», то, если div с идентификатором «# tabs-1» не отображается, браузер будетпрокрутите там. 

<div id="tabs">
    <ul> 
        <li><a href="#tabs-1">Nunc tincidunt</a></li> <!-- a click on this -->
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"> <!-- will point to this -->
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu...</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc..</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante...</p>
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi...</p>
    </div>
</div>

В основном вам нужно использовать метод "select" $ (selector) .tabs ("select", index);чтобы получить желаемый эффект.

...