码迷,mamicode.com
首页 > 其他好文 > 详细

jq制作好看的导航显示效果

时间:2014-07-27 10:03:52      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

先上个效果图:

在关于页面时,

bubuko.com,布布扣

在点击邻居管理后,

bubuko.com,布布扣

实现所在页面的提示,相当于文字导航。

实现方法:

js:

 1 var a,b;
 2 function admin_op(a,b){ 
 3      if(b==0){
 4          history.go(0)
 5          return true;
 6      }else{
 7      $("#left").children("div").removeAttr(‘style‘);//移除id=left的div下所有的div样式(下面html页面么有left是因为我放在了另一个页面,就不给出了,道理是一样的)
 8      $("#editor").hide();        
 9      $("#center").load(b,function(){//这里的b是html传过来的参数,相当于下面html的"‘admin_article_op.php‘等等
" 10 $("#center").fadeIn(‘slow‘); 11 $("#left").children("div").eq(a).css({"background":"#09F"});//获取id=left的div下参数为a的css并设置样式
12  }) 
13 }
14
15 }

html:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>left</title>
 6 <style>
 7 div#left{ float:left; background:#FFF;  padding:20px 20px 20px; text-align:center; min-height:600px;}
 8 div#left div{padding:10px 10px 10px;}
 9 div#left div:hover{ background:#09F; }
10 div#left div a:hover{color:#FFF}
11 </style>
12 </head>
13 
14 <body>
15 
16 <div><a href="javascript:void(0)" onclick="admin_op(0,0)">文章添加</a></div>
17 
18 <div><a href="javascript:void(0)" onclick="admin_op(1,‘admin_article_op.php‘)">文章管理</a></div>
19 <div><a href="javascript:void(0)" onclick="admin_op(2,‘admin_liuyan_set.php‘)">留言管理</a></div>
20 <div><a href="javascript:void(0)" onclick="admin_op(3,‘admin_user_set.php‘)">用户管理</a></div>
21 <div><a href="javascript:void(0)" onclick="admin_op(4,‘admin_forme_set.php‘)">关于我</a></div>
22 <div><a href="javascript:void(0)" onclick="admin_op(5,‘admin_article_set.php‘)">文章设置</a></div>
23 <div><a href="javascript:void(0)" onclick="admin_op(6,‘admin_linju_set.php‘)">邻居管理</a></div>
24 
25 </body>
26 </html>

 

jq制作好看的导航显示效果

标签:

原文地址:http://www.cnblogs.com/mrcln/p/3870499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!