0

ページ内リンク アンカーを使用して、ページをスムーズにスクロールします。すべてがうまく機能し、各リンクは適切な画像に移動します。ただし、アクティブなセクションに別の画像を表示して、ユーザーがどこにいるかを示す必要があります。これを何かで動作させることはできないようです。

ここに私のHTMLがあります

<div id="scrollnav">
<ul>
    <li class="scrolldot"><span><a href="#one">1</a></span></li>
    <li class="scrolldot"><span><a href="#two">2</a></span></li>
    <li class="scrolldot"><span><a href="#three">3</a></span></li>
    <li class="scrolldot"><span><a href="#four">4</a></span></li>
    <li class="scrolldot"><span><a href="#five">5</a></span></li>
    <li class="scrolldot"><span><a href="#six">6</a></span></li>
</ul>
</div>

ここに私のCSSがあります

#scrollnav { width: 75px; height: 150px; position: fixed; right: 0; top: 100px; z-index: 999999;}
#scrollnav ul li { height: 16px; width: 16px; padding: 0px 0px 7px 0px; }
span { text-indent: -99999px; }
.scrolldot a { display: block; height: 16px; width: 16px; background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: -16px 0; }
.scrolldot a:hover { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 0; }
.selected { background-color: red; }

これは、スクロールしてアクティブにしたいセクションの例です。

<section id="one">
<div id="mainimagewrapper">
    <div class="image1">
        <div class="image2">
            <div class="970content">
                <div id="textdiv">
                    <h1>This is headline.</h1>
                    <p>This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here.</p>
                </div>                  
            </div>
        </div>
    </div>
</div>
</section>
4

2 に答える 2

0

/* アンカー疑似クラスを定義するための順序 */

a, a:link, a:visited { ... css ...}
a:hover, a:visited:hover {... css ...}
a:active,a.my-active {... css ...}
a:focus {... css ...}

このようにして、アンカーに対するブラウザのデフォルト アクションのスタイルを定義します。

その後、javascript を使用していくつかの動作をトリガーする必要がある場合があります (ハイパーリンクの #hash が原因でブラウザーが誤動作する場合)。

jQuery アクションを使用して.my-activeトグル onClick などのフレーバーを追加しても、ページを「リロード」すると役に立ちません。ハイパーリンクから #hash を推測し、それをスタイリングに使用する必要があります。

jQuery hashchangeを使用してハイパーリンクから #hash を取得し、スコープ内の要素でクラスをトリガーするだけです。

それ以外の場合は、開いたページ内のある場所にスクロールするためのプラグインが必要な場合: http://demos.flesler.com/jquery/scrollTo/ またはjquery-joyride-feature-tour-plugin を調べてください。

続ける

于 2013-02-07T16:29:29.343 に答える
0

独自の jQuery スクリプトを作成せずにこれを行う最も簡単な方法は、Twitter Bootstrap の「Scrollspy」プラグインを調べることだと思います。ごくわずかな構成で、探している効果が得られると思います。

リンク: http://twitter.github.com/bootstrap/javascript.html#scrollspy

于 2013-02-07T16:29:35.573 に答える