首页 > 代码库 > jq制作好看的导航显示效果
jq制作好看的导航显示效果
先上个效果图：
在关于页面时，
在点击邻居管理后，
实现所在页面的提示，相当于文字导航。
实现方法：
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制作好看的导航显示效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。