首页 > 导航栏如何默认选中?如何根据当前页面浏览位置,导航栏自动选中?

导航栏如何默认选中?如何根据当前页面浏览位置,导航栏自动选中?

如题所言,需要刚进网页时是导航栏默认选中某项,然后随着网页的拖动,导航栏根据浏览内容来进行相应的选中状态。

导航栏html代码如下:

<ul class="nav_bar">
                <li><a href="#header" >首页</a></li>  <!--默认-->
                <li><a href="#self">关于我们</a></li>
                <li><a href="#product">产品</a></li>
                <li><a href="#team">团队</a></li>
            </ul>

要怎么实现呢?
补充:
1、没用bootstrap;
2、我这边是一个长网页,不是多个页面,需要根据当前浏览内容的不同来进行导航栏的自动选中;
3、初始默认选中怎么实现。
(今儿有bug,上传图片一直失败)
我的想法:
判断浏览内容的id来进行识别,并进行选中。


如果我没猜错的话你用的是bootstrap,你可以在每块页面内容后加一段js,设置li标签的className='active'<li id="xxx"X> <script type="text/JavaScript">document.getElementById('xxx').className='active'</script>


谢邀,但是这问题不好回答。

拖动的时候顺便切换选中状态就行了,具体代码没法儿说,不知道你是怎么个拖动法儿。


寫了個簡陋版的,主要是預先儲存每個區塊的觸發高度和其對應的導航,監聽 scroll 事件,在遍歷去比對 (這也是為什麼預先儲存的關係,不然每次都要進行 Dom 操作消耗太大),取得小於目前捲軸位置最後那個,並且給對應的導航添加 active class

CodePen


怎么个拖法啊?是滚动吗?是的话可以试试监听滚动事件,获取滚动高度,到达一定高度对导航栏自动选中。ps:可能会有性能问题,可以用定时器限制下代码的执行周期。


你可以看看 Bootstrap 的 滚动监听

【热门文章】
【热门文章】