0

在我的网站上，我有一个粘性标题，上面有几个不同的导航项目，单击时会向下滚动以在页面上找到该部分。我想知道如何设置它，以便当视图位于其对应的部分时导航项会改变颜色。换句话说，如果查看者在“x”部分，导航栏上的“x”将改变颜色。

更新：继承人使用导航栏的代码

<div class = 'nav-container'>
    <nav>
        <div id = 'nav-items-container'>
            <ul class='nav-items'>
                <li class='nav-item'><a href='#what'>what</a></li>
                <li class='nav-item'><a href='#how'>how</a></li>
                <li class='nav-item'><a href='#why'>why</a></li>
                <li class='nav-item'><a href='#who'>who</a></li>
                <li class='nav-item'><a href='#where'>where</a></li>
            </ul>
        </div>
    </nav>
</div>

一些CSS

.nav-container{
   background-color:black;
   height:50px;
   width:410px;
   font-size: 120%;
   position:absolute;
}



a:link{
    color:white;
}

a:visited{
    color:#58ACFA;
}
#nav-items-container ul li{
    display:inline;
}

#nav-items-container ul li a{
    padding: 20px;
    text-decoration:none;
}
#nav-items-container ul{
    margin:0;
    padding:0;
    list-style-type: none;
    text-align: center;
    padding-top:15px;
}
4

3 回答 3

1

If you can use jquery you can do something like:

 <script type="text/javascript">
    $(function() {
        var sections = [],
            anchors = $('#nav-items-container a[href^="#"]'),  // anchor links with hash tags
            docHeight = $(document).height(),
            currentOffset,
            setNavActive;

        // handler to update the class  
        setNavActive = function(hash){
            anchors.removeClass('current-section');
            anchors.filter('a[href="' + hash + '"]').addClass('current-section');
        };
        
        // building our hash/start/end position map 
        $.each(anchors, function(i, item) {
            currentOffset = $(item.hash).offset().top;
            if (i > 0) {
                sections[i-1].end = currentOffset;
            }
            
            sections[i] = { 
                            hash: item.hash, 
                            start: (i == 0 ? 0 : currentOffset),
                            end: docHeight
                          };
        });
        
        // on scroll event, check which map fits, 
        // find the hash and set the class          
        $(document).scroll(function() {
            currentOffset = $(document).scrollTop();
            for (var i = 0; i < sections.length; i++) {
                if (sections[i].start <= currentOffset && sections[i].end > currentOffset) {
                    setNavActive(sections[i].hash);
                }
            }
        });
    });
</script>

I added a new style but you can make it nested or whatever:

.current-section {background:pink; }

jsFiddle

http://jsfiddle.net/fstreamz/krb6Q/3/

于 2013-07-15T03:12:32.167 回答
0

这里没有足够的信息来给出最佳答案。我可以给一个有效的。

将您的标题更改为如下所示：

<li class='nav-item' id = "nav_what"><a href='#what'>what</a></li>
<li class='nav-item' id = "nav_how"><a href='#how'>how</a></li>
<li class='nav-item' id = "nav_why"><a href='#why'>why</a></li>
<li class='nav-item' id = "nav_who"><a href='#who'>who</a></li>
<li class='nav-item' id = "nav_where"><a href='#where'>where</a></li>

然后在每个页面的正文中放置

<script>
document.getElementById('nav_what').style.backgroundColor = "gray";
</script>

您必须在每个页面上使用正确的 id 将其切换出去。如果标题没有从外部加载，它更传统地使用内联样式手动完成。

于 2013-07-15T02:26:25.367 回答
0

如下添加另一个CSS声明并将active样式应用于当前页面。

#nav-items-container ul li.active a {
    color:red;
}

像这样应用上述样式...

<li class='nav-item active'><a href='#what'>what</a></li>

jsFiddle 演示

于 2013-07-15T02:40:14.303 回答