首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jquery插件学习之二——N级导航栏解决办法

2014-01-17 
jquery插件学习之二——N级导航栏先上图:调用方法: script srchttp://code.jquery.com/jquery-1.10.2.min

jquery插件学习之二——N级导航栏
先上图:
jquery插件学习之二——N级导航栏解决办法

调用方法:


 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script src="jquery.simpleNavigation.js"></script>
 <link href="simpleNavigation.css" rel="stylesheet" />
 <script>
$(document).ready(function() {
$("#div").simpleNavigation();
}) 
 </script>


html结构:

    <div id="div" class="simpleNavigation">
        <div class="menu">
            <ul>
                <li><a href="#sub01">主页</a></li>
                    <li><a href="#sub02">公司介绍</a></li>
                    <li><a href="#sub03">获得荣誉</a></li>
                    <li><a href="#sub04">联系我们</a></li>
                </ul>
            </div>
            <!--一级子菜单-->
            <div class="sub1">
            <ul id="sub01">
                <li><a href="#sub0101">主页1</a></li>
                    <li><a href="#sub0102">主页2</a></li>
                    <li><a href="#">主页3</a></li>
                </ul>
                <ul id="sub02">
                <li><a href="#sub0201">公司介绍1</a></li>
                    <li><a href="#">公司介绍2</a></li>
                    <li><a href="#sub0203">介绍3</a></li>
                </ul>
                <ul id="sub03">
                <li><a href="#">荣誉1</a></li>
                    <li><a href="#">荣誉2</a></li>
                </ul>
                <ul id="sub04">
                <li><a href="#">联系1</a></li>
                </ul>
            </div>
            <!--二级子菜单-->
            <div class="sub2">
            <ul id="sub0101">
                <li><a href="#sub010101">主页11</a></li>
                    <li><a href="#sub010102">主页11</a></li>
                    <li><a href="#">主页11</a></li>
                    <li><a href="#">主页11</a></li>
                </ul>
                <ul id="sub0102">
                <li><a href="#">主页12</a></li>
                    <li><a href="#sub010202">主页12</a></li>


                    <li><a href="#">主页12</a></li>
                </ul>
                <ul id="sub0201">
                <li><a href="#">公司介绍1</a></li>
                    <li><a href="#">公司介绍1</a></li>
                </ul>
                <ul id="sub0203">
                <li><a href="#">公司介绍3</a></li>
                    <li><a href="#">公司介绍3</a></li>
                </ul>
            </div>
             <!--三级子菜单-->
            <div alt="jquery插件学习之二——N级导航栏解决办法" />

也欢迎给我另一个插件给点意见。。。
jquery插件学习之一——选项卡


[解决办法]
饿 没看到源码. 

目测建议不要通过DOM作为树的结构定义, 而是运用json/array这种自定义树形结构来构造html, simpleNavigation方法的处理参数也使用json/array树. 这样逻辑会清晰, 修改也会方便

热点排行