码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现收缩展开左边栏

时间:2014-08-18 10:29:13      阅读:569      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   for   ar   2014   

bubuko.com,布布扣

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Frame_Index" %>

<!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>
<link href="../css/Style.css" rel="stylesheet" />
<script src="../js/jquery-2.1.0.js"></script>
<script>
$(document).ready(function () {
$("#to_left").click(function () {
if ($(this).attr("src") == "../imgs/to_left.png") {
$("div.nt_main").addClass("nt_main_no");
$(this).attr("src", "../imgs/to_right.png");
$("div.mb_main").css("margin-left", "7px");
} else {
$("div.nt_main").removeClass("nt_main_no");
$(this).attr("src", "../imgs/to_left.png");
$("div.mb_main").css("margin-left", "214px");
}
});
});
</script>
</head>
<body style=" background-color:#ededed;">
<form id="form1" runat="server">
<!--顶部菜单-->
<div class="tm_top">
<div class="welc">
<asp:Label ID="lbl_welc" runat="server"></asp:Label>
</div>
<div class="quit">
<asp:HyperLink ID="hpl_quit" runat="server" NavigateUrl="~/Login.aspx" Target="_parent" ToolTip="安全退出">安全退出</asp:HyperLink>
</div>
<div class="clr"></div>
</div>
<!--左边导航-->
<div class="nt_main">
</div>
<!--中间收缩-->
<div class="mid_img">
<img id="to_left" src="../imgs/to_left.png" alt="收缩" />
</div>
<!--右边主体-->
<div class="mb_main">
</div>
<div class="clrs"></div>
</form>
</body>
</html>

jQuery实现收缩展开左边栏,布布扣,bubuko.com

jQuery实现收缩展开左边栏

标签:style   blog   http   color   io   for   ar   2014   

原文地址:http://www.cnblogs.com/sijie/p/3918741.html

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