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

先上个效果图:

在关于页面时,

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

在点击邻居管理后,

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

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

实现方法:

js:

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

html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>left</title>
<style>
div#left{ float:left; background:#FFF; padding:20px 20px 20px; text-align:center; min-height:600px;}
div#left div{padding:10px 10px 10px;}
div#left div:hover{ background:#09F; }
div#left div a:hover{color:#FFF}
</style>
</head> <body> <div><a href="javascript:void(0)" onclick="admin_op(0,0)">文章添加</a></div> <div><a href="javascript:void(0)" onclick="admin_op(1,'admin_article_op.php')">文章管理</a></div>
<div><a href="javascript:void(0)" onclick="admin_op(2,'admin_liuyan_set.php')">留言管理</a></div>
<div><a href="javascript:void(0)" onclick="admin_op(3,'admin_user_set.php')">用户管理</a></div>
<div><a href="javascript:void(0)" onclick="admin_op(4,'admin_forme_set.php')">关于我</a></div>
<div><a href="javascript:void(0)" onclick="admin_op(5,'admin_article_set.php')">文章设置</a></div>
<div><a href="javascript:void(0)" onclick="admin_op(6,'admin_linju_set.php')">邻居管理</a></div> </body>
</html>
上一篇:codevs3872 邮递员送信(SPFA)


下一篇:数据分析---《Python for Data Analysis》学习笔记【03】