- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="description" content="" />
- <meta name="keywords" content="" />
- <title></title>
- <style type="text/CSS">
- span,div,ul,li,body,a{list-style:none;padding:0;margin:0}
- a{text-decoration:none}
- #container{width:60%;margin:0 auto;background:#f1f1f1; min-height: 500px;}
- #nav .menu-main::after,.sub-nav-items::after{display:block;content:"";clear:both;height:0}
- #nav{width:100%;background:#393755}
- #nav .menu-main a{padding:0 10px;font-size:14px;color:#fff;display:block}
- #nav li a{position:relative;float:left;color:#FFF;line-height:42px;text-decoration:none}
- .sub-nav-items{display: none;}
- .sub-nav-items .nav-item a{display:block;float:left;padding:12px 11px;font-size:14px;color:#444}
- .filter-list{display: none;}
- .filter-list a{padding:0 8px;display:inline-block;vertical-align:middle;text-decoration:none;margin-bottom:5px;font-size:12px;line-height:22px;height:22px;color:#fff;background-color:#558bd9;border-radius:10px}
- .filter-section{padding-left:10px}
- </style>
- </head>
- <body>
- </body>
- <script type="text/javascript" src1="jquery-1.11.0.min.js"></script>
- <script type='text/javascript'>
- (function(){
- var $ = jQuery;
- var obj = {
- "电视" : {
- "大陆剧" : ["好大一个家","平凡的世界","收获的季节","刘老根","乡村爱情","士兵突击","神探狄仁杰","武媚娘传奇"],
- "美剧" : ["吸血鬼日记","闪电侠","行尸走肉","童话镇","破产姐妹","格林"],
- "台剧" : ["有爱一家人","再见阿郎","我的宝贝四千金","新白娘子传奇"],
- "韩剧" : ["来自星星的你","匹诺曹","奔跑吧玫瑰","美女的诞生","未来的选择",],
- },
- "电影" : {
- "动作" : ["A计划","警察故事","黄飞鸿","特务迷城","卧虎藏龙","逗你玩"],
- "爱情" : ["保定爱情","山楂树之恋","北京遇上西雅图"],
- "恐怖" : ["僵尸家族","驱鬼警察","僵尸道长"]
- },
- "综艺" : {
- "百变大咖秀" : ["第一期","第二期","第二期","第四期"],
- "快乐大本营" : ["谢娜","何炅","维嘉","杜海涛","吴昕"],
- "天天向上" : ["汪涵","欧弟","田园","钱枫","小五"],
- "康熙来了" : ["小S","蔡康永","赵薇","萧敬腾","阿雅","吴宗宪"]
- }
- }
- function Product() {
- this.enable();
- this.build();
- }
- Product.prototype.enable = function () {
- var self = this;
- $("body").on("click",'#nav a,.nav-item a',function(event){
- self.start($(event.currentTarget));
- return false;
- });
- }
- Product.prototype.build = function () {
- $('<div id="container"><div id="nav"><div class="menu-main"></div></div><div class="sub-nav"></div><div class="filter-content"><div class="filter-section"></div></div></div>').appendTo($('body'));
- this.$navMenu = $(".menu-main");
- this.$subNav = $(".sub-nav");
- this.$filterSection = $(".filter-section");
- this.data = obj;
- for(var i in obj) {
- $('<li class="nav-menu"><a href="javascript:void(0);">'+ i +'</a></li>').appendTo(this.$navMenu);
- this.$subNavTtems = $('<ul class="sub-nav-items"></ul>');
- this.$subNavTtems.appendTo(this.$subNav);
- for (var j in obj[i]) {
- $('<li class="nav-item"><a href="javascript:void(0);">'+ j +'</a></li>').appendTo(this.$subNavTtems);
- this.$filterList = $('<div class="filter-list"></div>');
- this.$filterList.appendTo(this.$filterSection);
- for (var k = 0; k < obj[i][j].length; k++) {
- $('<a href="javascript:void(0);" class="filter-sel">'+ obj[i][j][k] +'</a>').appendTo(this.$filterList);
- }
- }
- }
- }
- Product.prototype.start = function (e) {
- var p = $(e).parent();
- if (p.attr("class") == "nav-menu") {
- $(".filter-list").hide();
- var index = $(e).parent().index();
- $(".sub-nav-items").hide().eq(index).show();
- }else {
- var index = $(".nav-item").index($(e).parent());
- $(".filter-list").hide().eq(index).show();
- }
- }
- $(function(){
- var o = new Product(obj);
- })
- }).call(this);
- </script>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0104201512069.html
来源: http://www.codesnippet.cn/detail/0104201512069.html