Ссылки / якоря Ahref перемещают страницу вниз по вертикали предотвратите дефолт ();

Question

Ссылки / якоря Ahref перемещают страницу вниз по вертикали предотвратите дефолт ();

0

Это, без сомнения, очень простой HTML, но у меня проблема с некоторыми якорь-тегами. У меня есть страница с тремя перекрывающимися вкладками. Вы щелкаете по вкладке, и содержимое выходит на передний план. Проблема заключается в том, что страница перемещается вертикально вниз, так что вкладка находится в верхней части страницы (обычно они на полпути вниз).

Прилагается мой скрипт для выполнения функции, а также версия связанного с HTML.

Я думаю, мне нужно использовать preventDefault(); где-то, но не уверен где. Любые идеи оценили.

<!--Javascript function to brings tabs to the front-->
<script type="text/javascript">
$(document).ready(function () {
    $("div.tab-headers>a").click(function () {
        // Grab the href of the header
        var _href = $(this).attr("href");

        // Remove the first character (i.e. the "#")
        _href = _href.substring(1);

        // show this tab
        tabify(_href);
    });
    tabify();
});
function tabify(_tab) {
    // Hide all the tabs
    $(".tab").hide();

    // If valid show tab, otherwise show the first one
    if (_tab) {
        $(".tab a[name=" + _tab + "]").parent().show();
    } else {
        $(".tab").first().show();
    }
}
// On page load...
$(document).ready(function () {
    // Show our "default" tab.
    // You may wish to grab the current hash value from the URL and display the appropriate one
    // tabify();
});
</script>

Мой HTML:

 <div class="glossary">

    <div class="tab-headers">
    <a href="#tab1"></a>
    <a href="#tab2"></a>
    <a href="#tab3"></a>
    </div>

    <!--Tab 1-->    
    <div class="tab">
    <a name="tab1"></a>
    contents 1 here
    </div>

    <!--Tab 2-->
    <div class="tab">
    <a name="tab2"></a>
    contents 2 here          
    </div>

    <!--Tab 3-->
    <div class="tab">
    <a name="tab3"></a>
    contents 3 here          
    </div>
 </div>

user2406993 28 нояб. 2013, в 14:30

Источник

0

«Я думаю, что мне нужно использовать protectDefault (); где-то, но не уверен, где. » - как насчет: в месте, где вы на самом деле обрабатывать щелчок…?
CBroe 28 нояб. 2013, в 12:45
0

да, но я не хочу, чтобы он прыгнул, но сохранил свою позицию. CBroe, извини, но куда я это положу, я не понимаю. Спасибо
user2406993 28 нояб. 2013, в 12:47

Теги:

html

anchor

1 ответ

Ещё вопросы

«Я думаю, что мне нужно использовать protectDefault (); где-то, но не уверен, где. » - как насчет: в месте, где вы на самом деле обрабатывать щелчок…?
да, но я не хочу, чтобы он прыгнул, но сохранил свою позицию. CBroe, извини, но куда я это положу, я не понимаю. Спасибо

Sander Koedood · Accepted Answer · 2013-11-28T11-27-00.000Z

Я считаю, что preventDefault() должен идти здесь:

$("div.tab-headers>a").click(function(e){
    e.preventDefault();
    ....

Обратите внимание на добавленный (e) после функции. Таким образом, это приведет к следующему коду:

<!--Javascript function to brings tabs to the front-->
<script type="text/javascript">
$(document).ready(function () {
    $("div.tab-headers>a").click(function (e) {
        e.preventDefault(); // normal behavior is stopped
        // Grab the href of the header
        var _href = $(this).attr("href");

        // Remove the first character (i.e. the "#")
        _href = _href.substring(1);

        // show this tab
        tabify(_href);
    });
    tabify();
});
function tabify(_tab) {
    // Hide all the tabs
    $(".tab").hide();

    // If valid show tab, otherwise show the first one
    if (_tab) {
        $(".tab a[name=" + _tab + "]").parent().show();
    } else {
        $(".tab").first().show();
    }
}
// On page load...
$(document).ready(function () {
    // Show our "default" tab.
    // You may wish to grab the current hash value from the URL and display the appropriate one
    // tabify();
});
</script>