来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] [html]%@ Page Language=C# AutoEventWireup=true CodeBehind=daohang.aspx.cs Inherits=_0A_ANXIN.daohang %!DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead runat=serv......
|
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="daohang.aspx.cs" Inherits="_0A_ANXIN.daohang" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/Jquery1.7.js"></script> <script type="text/javascript"> $(function () { //*******************一级菜单点击****************** var yijicaidan;//上一次点击的元素 $('.div_ul_li').click(function () { $(this).css({ 'background-color': '#555' }); $(this).unbind('mouseover').unbind('mouseout');//给点击的元素解绑，不再随着鼠标的变化而变化 $(this).parent().children('div:last').css('display', $(this).parent().children('div:last').css('display') == 'none' ? 'initial' : 'none'); if (yijicaidan != null && yijicaidan.text() != $(this).text()) {//判断是不是同一个元素 yijicaidan.css({ 'background-color': '#eee' });//初始化上一次点击的div的背景颜色 yijicaidan.parent().children('div:last').css('display', 'none');//隐藏上一次点击的元素的二级菜单 yijicaidan.bind('mouseover', function () { $(this).css({ 'background-color': '#aaa' }); })//给上一次点击的元素帮顶mouseover事件 yijicaidan.bind('mouseout', function () { $(this).css({ 'background-color': '#eee' }); })//给上一次点击的元素帮顶mouseout事件 yijicaidan = null; } yijicaidan = $(this); }) //*******************一级效果*********************** $('.div_ul_li').bind('mouseover', function () { $(this).css({'background-color':'#aaa'}); }) $('.div_ul_li').bind('mouseout', function () { $(this).css({ 'background-color': '#eee' }); }) var erjicaidan;////上一次点击的元素 //********************二级菜单点击********************* $('.div_ul_li_div ul li').click(function () { if (erjicaidan!=null) { erjicaidan.css({ 'background-color': '#def' });//初始化所有的二级菜单背景 } window.open($(this).children('input').val(), "content"); $(this).css({ 'background-color': '#789' }).unbind('mouseover').unbind('mouseout'); if (erjicaidan != null && erjicaidan.text() != $(this).text()) {//判断是不是同一个元素 erjicaidan.css({ 'background-color': '#def' });//初始化上一次点击的div的背景颜色 erjicaidan.bind('mouseover', function () { $(this).css({ 'background-color': '#abc' }); })//给上一次点击的元素帮顶mouseover事件 erjicaidan.bind('mouseout', function () { $(this).css({ 'background-color': '#def' }); })//给上一次点击的元素帮顶mouseout事件 erjicaidan = null; } erjicaidan = $(this); }) //*******************二级效果*********************** $('.div_ul_li_div ul li').bind('mouseover', function () { $(this).css({ 'background-color': '#abc' }); }) $('.div_ul_li_div ul li').bind('mouseout', function () { $(this).css({ 'background-color': '#def' }); }) }) </script> <style type="text/css"> /***********第一级菜单***********/ #div_ul { list-style-type: none; } .div_ul_li { cursor: pointer; background-color: #eee; padding: 5px 0 5px 5px; margin-left: -40px; font-size:15px; } /***********第二级菜单***********/ .div_ul_li_div ul { list-style-type: none; } .div_ul_li_div ul li { cursor: pointer; margin-left:-80px; padding:5px 0 5px 15px; background-color:#def; font-size:12px; } </style> </head> <body> <form id="form1" runat="server"> <div> <ul id="div_ul" runat="server"> <li> <div class="div_ul_li"> 我的工作 </div> <div class="div_ul_li_div" style="display:none;"> <ul> <li> 我的消息<input type="hidden" value="http://www.baidu.com"> </li> <li> 我的邮件<input type="hidden" value="http://www.baidu.com"> </li> <li> 我的短信<input type="hidden" value="http://www.baidu.com"> </li> </ul> </div> </li> <li> <div class="div_ul_li"> 计划/考勤 </div> <div class="div_ul_li_div" style="display:none;"> <ul> <li> aaa<input type="hidden" value="http://www.baidu.com"> </li> </ul> </div> </li> <li> <div class="div_ul_li"> 公文处理 </div> <div class="div_ul_li_div" style="display:none;"> <ul> <li> aaa<input type="hidden" value="http://www.baidu.com"> </li> </ul> </div> </li> <li> <div class="div_ul_li"> 资源/会议 </div> <div class="div_ul_li_div" style="display:none;"> <ul> <li> aaa<input type="hidden" value="http://www.baidu.com"> </li> </ul> </div> </li> <li> <div class="div_ul_li"> 车辆/司机 </div> <div class="div_ul_li_div" style="display:none;"> <ul> <li> aaa<input type="hidden" value="http://www.baidu.com"> </li> </ul> </div> </li> </ul> </div> </form> </body> </html> 这里前台的内容只是例子，实际要显示的内容是从后台读取的数据库。下面有后台和数据库的截图 后台： protected void Page_Load(object sender, EventArgs e) { GetReader(); } void GetReader() { div_ul.InnerHtml = ""; SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["str"].ConnectionString); SqlCommand cmd = new SqlCommand(); cmd.Connection = con; cmd.CommandText = "Pro_select_guilei"; cmd.CommandType = System.Data.CommandType.StoredProcedure; SqlDataAdapter adapter = new SqlDataAdapter(cmd); DataTable dt = new DataTable(); adapter.Fill(dt); StringBuilder strs = new StringBuilder(); foreach (DataRow item in dt.Rows) { strs.Append("<li><div class=\"div_ul_li\">"+item["name"]+"</div><div class=\"div_ul_li_div\" style=\"display:none;\"><ul>"); cmd.CommandText = "Pro_select_caidan"; cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.Clear(); cmd.Parameters.Add(new SqlParameter("@fatherid", item["contentid"])); adapter.SelectCommand = cmd; DataTable dtd = new DataTable(); adapter.Fill(dtd); foreach (DataRow item1 in dtd.Rows) { strs.Append("<li>"+item1["name"]+"<input type='hidden' value='"+item1["url"]+"' /></li>"); } strs.Append("</ul></div></li>"); } adapter.Dispose(); cmd.Dispose(); con.Dispose(); div_ul.InnerHtml = strs.ToString(); } |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
