jquery光标定位 jquery定位标签

转载

mob64ca14106f2f 2023-08-30 10:04:10

文章标签 jquery光标定位导航栏锚点自动跳转 文章分类 jQuery 前端开发

商品分类导航栏。

我们现在需要做到的效果是：

1、点击某个商品分类，自动跳转至具体的商品列表。

2、在鼠标滚动浏览商品的同时，根据左侧的商品信息的变化情况，右侧的分类名称会自动标红。表示现在浏览的商品正是该分类下的商品。

实现的基本思路：

1、设置锚点。在导航栏的<a>标签中，设置"href"属性为各个展示商品信息的<div>标签的"id"属性。

2、自动删除/添加样式。当鼠标浏览到某一分类时，自动给右侧导航栏中该分类名称添加一个“当前样式”；当鼠标继续浏览，离开该分类时，自动删除该分类的“当前样式”，并同理给下一个分类添加“当前样式”。

根据思路实现过程：

1、首先创建一些示例的代码：

...
<body>
    <div id="menu">         <!--商品分类导航栏-->
        <ul>
            <li><a href="#one">1F手机</a></li>
            <li><a href="#two">2F电脑</a></li>
            <li><a href="#three">3F家电</a></li>
            <li><a href="#four">4F服饰</a></li>
            <li><a href="#five">5F鞋子</a></li>
        </ul>
    </div>
    <div id="content">        <!--商品信息列表-->
        <div id="one" class="test">...(具体商品)...</div>
        <div id="two" class="test">...(具体商品)...</div>
        <div id="three" class="test">...(具体商品)...</div>
        <div id="four" class="test">...(具体商品)...</div>
        <div id="five" class="test">...(具体商品)...</div>
    </div>
</body>
        ...

以上就完成了该网站的雏形（在此不展示css的制作过程），并且点击<ul>标签中的各个<li>标签都能跳转到相应的<div>标签。

2、设置“当前样式”：

为了简单起见，我们设置一个表示当前商品分类的样式，如下所示：

.current{
    background:red;
}

然后给导航栏中的“1F手机”设置一个“当前样式”，默认我们是从头开始浏览网站。接下来需要做的是利用jquery根据商品信息，自动给导航栏中的分类添加“当前样式”。

<script>
    $(document).ready(function() {
    $(window).scroll(function(){
	var scrolltop = $(document).scrollTop();	
	console.log(scrolltop );    //目的是为了在控制台中查看滚动条的高度
	var currentSorts= ""; 	
	var commoditys = $(".test");    //所有class为"test"的div
	$.each(commoditys ,function() {
		var divTop = $(this).offset().top;
		console.log(divTop );
		if (scrolltop >divTop ) {
		       currentSorts= "#" + $(this).attr("id");//获取到当前所在的商品分类 
		}else{
			return false;
		}
	});
	//给对应分类设置“当前样式”
	var currentClass = $("#menu").find('.current');    //找到目前样式所在的分类
	if (currentSorts&¤tClass .attr("href")!=currentSorts) {
	//判定条件：currentSorts是否为空  &&  当前样式所在的分类的id是否等于currentSorts
	        currentClass .removeClass("current");
		$("#menu").find("[href="+currentSorts+"]").addClass("current");
	}			
    });
});
</script>

这就已经完成了导航栏中分类名跟随商品变化而变化的效果了，在这里需要解释一下，这个效果实现的关键点在于，怎么样根据左侧的div区域的高度和右侧的滚动条的高度去判定在哪一个分类。

在代码中我们看到“var scrolltop = $(document).scrollTop();”指的是滚动条的高度，如图：