这篇文章主要介绍了js模拟淘宝网的多级选择菜单实现方法,涉及javascript针对页面元素结点的遍历与设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js模拟淘宝网的多级选择菜单实现方法。分享给大家供大家参考。具体如下：
这是一款基于js模拟淘宝网的多级选择菜单代码，这款菜单是模拟淘宝网的，是很早时候的淘宝网，现在已经没有了，本款菜单可以像级联菜单那样一级一级的选择数据，最后确定出数据。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/js-ftaobao-select-menu-codes/
具体代码如下：
模拟淘宝网菜单选择 body *{ font-size:14px; margin:0; padding:0; } #CategorySelector{ clear:both; width:778px; height:220px; background-color:#FFF; margin-bottom:8px; } #CategorySelector ul{ margin:0 3px 0 0; padding:0; border:1px solid #CCC; float:left; width:189px; height:218px; overflow:auto; } #CategorySelector ul.Blank{ background-color:#F6F6F6; } #CategorySelector li{ list-style-type:none; width:auto; height:20px; margin:0 1px !important; margin /**/:0 1px 0 -15px; padding:0; border:1px solid #FFF; line-height:20px; color:#444; text-indent:3px; cursor:default; } #CategorySelector li.Selected{ background-color:#CAFFC0; border:1px solid #0A9800; color:#006623; } #CategorySelector li.IsParent{ background-image:url(//img.jbzj.com/file_images/article/201508/201581893903737.gif); background-position:99% 50%; background-repeat:no-repeat; } #CategorySelector li.RecentUsed{ color:#170; } #CategoryTitle{ clear:both; width:778px; background-color:#FFF; } #CategoryTitle ul{ float:left; } #CategoryTitle li{ margin:0 3px 0 0; float:left; border:1px solid #CCC; width:189px; color:#0063C8; font-weight:bold; border-bottom:0px; height:23px; line-height:23px; }
- 选择宝贝类别
- 选择游戏
- 选择游戏区域
- 选择服务器
希望本文所述对大家的javascript程序设计有所帮助。
以上就是js模拟淘宝网的多级选择菜单实现方法的详细内容，更多请关注本站其它相关文章！
