https://uqer.io/community/share/551cfa1ff9f06c8f339044ff
<!doctype html>
<html>
<head>
<title>
11
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* { margin:0; padding:0; }
html{overflow-x: hidden;}
body { font-size: 12px; font-family: "微软雅黑","宋体",Arial,sans-serif; background:#FFFFFF;min-width: 1260px;overflow-x: hidden;}
ul { list-style-type:none; }
.header { height:33px; background:url(../images/bglogo.png) repeat-x; }
.wrapper { margin:4px 4px 0px 4px; position:relative; }
.menu { width:200px; background-color:#F2F2F2; padding-top: 10px; }
.menu h1 { text-align: center;font-size: 20px;line-height: 46px; font-weight:bold; margin:0 10px; border-bottom: 1px solid #5e91ce }
.menu li.selected { background-color:#b8d5fb; }
.menu li > div { font-size:16px; text-align:center; line-height:46px; margin:0 10px; cursor:default; border-bottom: 1px solid #5e91ce }
.content { border:1px solid #9dc0ea; margin-left:25px;width:100%;height:100%}
.menuall { border:1px solid #9dc0ea;background-color: #f2f2f2;min-height: 800px;}
</style>
<script type="text/javascript" src="../easyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 绑定tab单击事件
$('.tabmenu li').click(function ()
{
if ($(this).hasClass('selected'))
{
return;
}
//重新选中
$('.tabmenu li').removeClass('selected');
$(this).addClass('selected');
//请求页面;
var container = document.getElementById("box");
var mainframe = document.getElementById("frame");
if(container != null && mainframe != null)
{
mainframe.height = 500;//container.offsetHeight;
mainframe.width = container.offsetWidth;
mainframe.src = $(this).attr('data-urllink');
}
// if($(tabpage).height() != $('.menuall').height()){
// $('.menuall').height($(tabpage).height());
//}
});
// 初始化
$('.tabmenu li:first').click();
});
</script>
</head>
<body>
<div style="float: left;" class="menuall">
<div id="memuP" class="menu">
<h1>11</h1>
<ul class="tabmenu">
<li data-urllink="1.html">
<div>11</div>
</li>
<li data-urllink="1.html">
<div>11</div>
</li>
<li data-urllink="1.html">
<div>11</div>
</li>
</ul>
</div>
<div id="memu" class="menu">
<h1>11</h1>
<ul class="tabmenu">
<li data-urllink="1.html">
<div>11</div>
</li>
<li data-urllink="2.html">
<div>11</div>
</li>
<li data-urllink="3.html">
<div>11</div>
</li>
<li data-urllink="4.html">
<div>11</div>
</li>
<li data-urllink="5.html">
<div>11</div>
</li>
<li data-urllink="6.html">
<div>11</div>
</li>
<li data-urllink="7.html">
<div>11</div>
</li>
</ul>
</div>
</div>
<div id="box" class="content">
<iframe id="frame" src="1.html" frameborder="0" scrolling="auto"></iframe>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui helps you build your web pages easily!">
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="../easyui/jquery-1.7.1.min.js"></script>
<style>
table
{
width:100%;
border-collapse:collapse;
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
table,th, td
{
border: 0px solid black;
}
tr.focus{background-color:rgb(255,228,141);}
</style>
</head>
<body>
<table id="tUsers">
<thead>
<tr>
<td style="cursor:default">序号</td>
<td style="cursor:default">帐号</td>
<td style="cursor:default">密码</td>
</tr>
</thead>
<tbody>
<tr>
<td style="cursor:default">1</td>
<td style="cursor:default">admin</td>
<td style="cursor:default">admin</td>
</tr>
<tr>
<td style="cursor:default">2</td>
<td style="cursor:default">guest</td>
<td style="cursor:default">123</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#tUsers>tbody>tr").on("click", function () {
$(this).parent().find("tr.focus").toggleClass("focus");//取消原先选中行
$(this).toggleClass("focus");//设定当前行为选中行
});
});
</script>
</body>
</html>
扫一扫
4759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
