(JQuery学习笔记)利用jquery制作网页导航定位-创新互联

我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品。那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息。例如图中所示,左侧是商品列表,右侧是商品分类导航栏。

创新互联专注于五河企业网站建设,响应式网站,商城网站建设。五河网站建设公司,为五河等地区提供建站服务。全流程按需网站建设,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

(JQuery学习笔记)利用jquery制作网页导航定位

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

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

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

实现的基本思路:

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

标签的"id"属性。

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

根据思路实现过程:

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

        ...

             
        

                
  • 1F手机

  •             
  • 2F电脑

  •             
  • 3F家电

  •             
  • 4F服饰

  •             
  • 5F鞋子

  •         

    

            
        ...(具体商品)...

        ...(具体商品)...

        ...(具体商品)...

        ...(具体商品)...

        ...(具体商品)...
    

        ...

    以上就完成了该网站的雏形(在此不展示css的制作过程),并且点击