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

/* ORDER 定义锚伪类 */

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

我认为最简单的方法是查看 Twitter Bootstrap 的“Scrollspy”插件，而无需编写自己的 jQuery 脚本。我相信它只需很少的配置即可提供您正在寻找的效果。

链接：http: //twitter.github.com/bootstrap/javascript.html#scrollspy

于 2013-02-07T16:29:35.573 回答