zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    套件测试
    注解实战aftersuite和beforesuite
    注解实战Beforeclass和Afterclass
    Centos7下安装Mongodb
    java的算法实现冒泡
    注解实战BeforeMethed和afterMethed
    前端 HTML的规范
    前端 HTML标签介绍
    前端 HTML文档 详解
    前端 HTML 简介
  • 原文地址:https://www.cnblogs.com/mrcln/p/3870499.html
Copyright © 2011-2022 走看看