1.端口案例改进，操作更灵活
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.model{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 350px;
margin-top: -200px;
margin-left: -250px;
background-color: aliceblue;
z-index: 10;
}
.model p,h2{
text-align: center;
}
.model p input[type="text"]{
width: 300px;
height: 28px;
}
.model p input[type="button"]{
width: 150px;
height: 35px;
}
.shadow{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addModel();">添加</a>
<table border="1">
<thead>
<tr>
<th>地址</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td name="host">1.1.1.11</td>
<td name="port">80</td>
<td><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td name="host">1.1.1.12</td>
<td name="port">80</td>
<td><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
<tr>
<td name="host">1.1.1.13</td>
<td name="port">80</td>
<td><a class="edit">编辑</a>|<a>删除</a></td>
</tr>
</tbody>
</table>
<div class="model hide">
<p><h2>操作</h2></p>
<p>地址：<input type="text" name="host"/></p>
<p>端口：<input type="text" name="port"/></p>
<p><input type="button" value="取消" onclick="removeModel();"/></p>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
//打开添加框
function addModel() {
$(‘.model,.shadow‘).removeClass(‘hide‘);
$(‘.model p input[type="text"]‘).val(‘‘);
}
//关闭添加框
function removeModel() {
$(‘.model,.shadow‘).addClass(‘hide‘);
}
//点击编辑时执行函数
$(‘.edit‘).click(function () {
$(‘.model,.shadow‘).removeClass(‘hide‘);
//获取当前点击元素的父级标签的所有兄弟标签
var tds=$(this).parent().prevAll();
tds.each(function () {
// $(‘.model input[name="?"]‘)获取name=？的输入框
//$(this).attr(‘name‘)获取被点击td标签的name值并带入？
//val(）赋值
//$(this).text()h获取被点击td标签的html文本
$(‘.model input[name=‘+$(this).attr(‘name‘)+‘]‘).val($(this).text());
})
})
</script>
</body>2.菜单切换内容
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
margin: 0 auto;
height: 35px;
line-height: 35px;
width: 400px;
background-color:#999999;
}
.menu .menu-item{
float: left;
width: 65px;
border-right: 1px solid #fdfdfd;
text-align: center;
color: #ffffff;
cursor: pointer;
}
.content{
margin: 0 auto;
height: 200px;
width: 398px;
border: 1px dashed #999999;
border-top: 0px;
}
.hide{
display: none;
}
.active{
background-color: #ff6600;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item active">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
<div class="content">
<div>内容一</div>
<div class="hide">内容二</div>
<div class="hide">内容三</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.menu-item‘).click(function () {
//被点击div的样式添加active，其他兄弟div样式去掉div
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
//获取被点击div的index索引
var index=$(this).index(‘.menu-item‘);
//根据索引找到content内容孩子中的对应div并移除样式hide，其他兄弟div添加h样式ide
$(‘.content‘).children().eq(index).removeClass(‘hide‘).siblings().addClass(‘hide‘);
})
</script>
</body>原文地址：http://blog.51cto.com/13803166/2150776
时间： 2024-11-20 14:40:58