HTML Anchor Jump не работает

Question

HTML Anchor Jump не работает

0

Название означает, что он говорит. когда я устанавливаю ссылку для перехода к определенному div, это не работает. Например, когда я говорю <a href="#Section1>Section 1</a> и нажимаю на него, он должен перейти к тегу привязки с именем "Section1" <a name="Section1"></> но ничего случается.

<main id="Main">
    <div class="Container">
        <div class="Section-Links Left Box-Sizing">
            <div class="Links">
                <a href="#test">Test Post</a>
                <a href="#test2">Test Post</a>
                <a href="#test3">Test Post</a>
                <a href="#test4">Test Post</a>
                <a href="#test5">Test Post</a>
                <a href="#test6">Test Post</a>
                <a href="#test7">Test Post</a>
                <a href="#test8">Test Post</a>
                <a href="#test9">Test Post</a>
                <a href="#test10">Test Post</a>
            </div>
        </div>
        <div class="Sections Left Box-Sizing">
            <div class="Section">
                <a name="Test"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test2"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test3"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test4"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test5"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test6"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test7"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test8"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test9"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div class="Section">
                <a name="Test10"></a>
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>
        </div>
        <div class="Clear"></div>
    </div>

    <p class="Footer-Masthead">Created By Moussa Harajli.</p>
</main>

если вы хотите проверить это здесь. http://67.184.73.19/Projects/Assassins/rules.php

Moussa Harajli 17 фев. 2014, в 20:50

Источник

0

аааа, вот мы и не поняли, что это с учетом регистра.
Moussa Harajli 17 фев. 2014, в 19:00

Теги:

html

css

anchor

3 ответа

2

Попробуйте установить идентификатор в теге div:

<div id="test" class="Section">...</div>

И это должно работать:

<a href="#test">Test Post</a>

beautifulcoder 17 фев. 2014, в 18:00

0

Сработало спасибо за помощь
Moussa Harajli 17 фев. 2014, в 19:09

1

Причина вашей проблемы заключается в том, что у вас есть другой идентификатор в ваших ссылках, поскольку test2 не совпадает с Test2.

Хотя... по моему опыту элемент <a> является по существу избыточным, поскольку во всех современных браузерах работает следующее:

<main id="Main">
    <div class="Container">
        <div class="Section-Links Left Box-Sizing">
            <div class="Links">
                <a href="#test">Test Post</a>
                <a href="#test2">Test Post</a>
            </div>
        </div>
        <div class="Sections Left Box-Sizing">
            <div id="test" class="Section">
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

            <div id="test2" class="Section">
                <span class="Section-Title">Test Section</span>
                <p class="Section-Text">Some Random Words Here.</p>
            </div>

Lea Hayes 17 фев. 2014, в 17:39

Ещё вопросы

аааа, вот мы и не поняли, что это с учетом регистра.

idmean · Accepted Answer · 2014-02-17T17-53-00.000Z

Якорные ссылки не указывают на name а на id s

поэтому измените, например:

<a name="Test7"></a>

чтобы:

<a id="Test7"></a>

И вы не должны изменять капитализацию идентификаторов в атрибуте id и ссылках.