当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 导航设计实现代码 学习jquery的朋友可以看下

技术文章搜索

关键字

Javascript 中的 jquery 导航设计实现代码 学习jquery的朋友可以看下

---

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 36 ::
收藏到网摘: n/a

JavaScript 应用技巧集合[推荐] 动态样式类封装JS代码

jquery 导航设计，主要是通过jquery控制一些css样式变换。

点击运行可以看到效果:<style type="text/css"> #menu{width:200px;} .has{background:#00DFAA; color:#FFFBF0; cursor:pointer} .hig{background:#FF5F55; color:#2A3F55;} div{padding:0px; margin:10px 0;} div a{background:#D41FAA; display:none; float:left; width:200px;} </style> <script type="text/javascript" src="/upload/tech/20091012/20091012100536_23ce1851341ec1fa9e0c259de10bf87c.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".has").click(function(){ $(this).addClass("hig").children("a").show().end().siblings().removeClass("hig").children("a").hide(); }); }); </script> <div id="menu"> <div class="has"> <span>第一章</span> <a>1.1哈哈哈哈哈哈</a> <a>1.2哈哈哈哈哈哈</a> <a>1.3哈哈哈哈哈哈</a> <a>1.4哈哈哈哈哈哈</a> </div> <div class="has"> <span>第二章</span> <a>2.1哈哈哈哈哈哈</a> <a>2.2哈哈哈哈哈哈</a> <a>2.3哈哈哈哈哈哈</a> <a>2.4哈哈哈哈哈哈</a> </div> <div class="has"> <span>第三章</span> <a>3.1哈哈哈哈哈哈</a> <a>3.2哈哈哈哈哈哈</a> <a>3.3哈哈哈哈哈哈</a> <a>3.4哈哈哈哈哈哈</a> </div> </div>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

JavaScript 应用技巧集合[推荐] 动态样式类封装JS代码

评论 (0) All

登陆 还没注册？

设为首页 | 加入收藏 | 关于我们 | 联系我们 | 广告服务 | 网站地图 | 友情链接 | 在线帮助 | 免责声明 Sitemap W3school

如果您觉得本站不错，别忘了告诉您的同学和同事哟 ^_^

欢迎各网站转载我们的原创，转载时请注明出处。

All copyright is reserved by 软晨网（RuanChen.com）