资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

目前创新互联已为上千的企业提供了网站建设、域名、虚拟主机网站运营、企业网站设计、灌南网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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

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

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

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

实现的基本思路:

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

标签的"id"属性。

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

根据思路实现过程:

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

        ...

             
        

                
  • 1F手机

  •             
  • 2F电脑

  •             
  • 3F家电

  •             
  • 4F服饰

  •             
  • 5F鞋子

  •         

    

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

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

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

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

        ...

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