day17--11/12章节对模态框的优化与对菜单的优化
1、对08章节的模态框进行优化
08章节的模态框，通过读取td标签的内容来实现，还使用了索引；
这样的缺点是 当在某个位置插入td标签时，jquery中读取td标签内容的代码均需要进行调整；
（1）将08模态框中的td标签加上一个target属性，html代码如下：
<a onclick="addElement();">添加</a> <table border="1"> <tr> <td target="hostname">1.1.1</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.2</td> <td target="port">90</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.3</td> <td target="port">100</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> <tr> <td target="hostname">1.1.4</td> <td target="port">110</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a>删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancleModal();" /> </div> </div> <div class="shadow hide"></div>
（2）css代码没有调整：
.modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-top: -250px; margin-left: -250px; background-color: #F5DEB3; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: #000000; z-index: 9; } .hide{ display: none; }
（3）对jquery代码中的编辑代码做了优化：
function addElement(){ $('.modal,.shadow').removeClass('hide'); } function cancleModal(){ $('.modal,.shadow').addClass('hide'); $('.modal input[type="text"]').val(''); } $('.edit').click(function(){ //this是指当前标签 $('.modal,.shadow').removeClass('hide'); var tds=$(this).parent().prevAll(); tds.each(function(){ //this ，代指每个td var v=$(this).attr('target'); //获取target的属性值；需要将其属性值赋给 b；将 td标签target="hostname"与input输入框中name="hostname"联系起来；同理将port，ip也联系起来 var text=$(this).text(); var a1='.modal input[name="'; var a2='"]'; temp=a1+v+a2; $(temp).val(text); // $('.modal input[name="'+v+'"]').val(text); //将上述内容合并在一起 })
这样的话，执行结果是一样的；但是要增加td标签时，只需要在表格中，增加即可，不需要再操作 js代码。
2、菜单栏代码优化：点击某一个菜单，其内容显示；别的菜单的内容隐藏：
点击某个菜单时，该菜单显示别的颜色：
（1）html代码如下：
<div style="width: 700px;margin: 0 auto;"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div>
</div>
（2）css代码如下：
.hide{ display: none; } .menu{ height: 38px; background-color: #EEEEEE; line-height: 38px; } .menu .menu-item{ float: left; border-right:1px solid red ; padding: 0 5px; cursor: pointer; //点击时鼠标变为手 } .active{ background-color: brown; } .content{ min-height: 100px; border: 1px solid #eeeeee; }
（3）jquery实现部分，与1中js的想法相同
<script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active'); $(this).siblings().removeClass('active'); // $(this).addClass('active').siblings().removeClass('active'); //与上述方法执行结果一样 var v=$(this).attr('a'); //将 a与b联系起来，这样将菜单与内容联系起来 // var a1='[b="'; // var a2='"]'; // var temp=a1+v+a2; // $('.content').children(temp).removeClass('hide'); // $('.content').children(temp).siblings().addClass('hide'); $('.content').children('[b="'+ v+'"]').removeClass('hide').siblings().addClass('hide'); //与上述方法执行结果一样 }) </script>
（4）对（3）中使用jquery实现的方式，可以使用索引实现
index用来获取索引位置；分别点击菜单一、二、三时，可以在控制台看到获取的索引位置分别是 0,1,2；
使用jQuery实现时，可以不使用菜单与内容的a b属性：
$('.menu-item').click(function(){ $(this).addClass('active'); $(this).siblings().removeClass('active'); // $(this).addClass('active').siblings().removeClass('active'); // var a=$(this).index(); // 菜单的索引 // console.log(a); // $('.content').children().eq(a).removeClass('hide').siblings().addClass('hide'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); })
