jquery初学完成tap标签+iframe前端页面的点击切换事件
2017-07-08 19:53
781 查看
这是我接触前端的第一个自编的tap标签页+iframe的切换功能,用的bootstrap的tap标签,由于源代码没有点击触发事件和删除添加标签页的功能,并且没有绑定iframe视图界面。
所以就小试牛刀一下,很多地方写的不好,还请多指出改正,谢谢
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/03/3668d4ba7f44692488cdefe397cbb8e3)
通过这次学习,总结出一个问题:jq选择器必须注意字符串拼接的问题,注意特殊符号的连接。
这次的小试牛刀还是有很多不足的地方,后面会继续改进。
所以就小试牛刀一下,很多地方写的不好,还请多指出改正,谢谢
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tap页切换与关闭</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div><button id="s1" class="add">点击我产生第一个tap页162网页</button> <button id="s2" class="add">点击我产生第二个tap页126网页</button> <button id="s3" class="add">点击我产生第三个tap页虎扑网页</button></div> <!-- 标签页栏--> <div> <ul id="myTab" class="nav nav-tabs"> <li class="active" id="l1"> <a href="#home" data-toggle="tab">主页</a> </li> </ul> </div> <!-- 与之绑定的iframe栏--> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <iframe style="width:1500px;height:800px;" scrolling="no" src="https://www.baidu.com"></iframe> </div> </div> </body> </html>以上是html部分,下面是js,jq脚本部分,由于当时用的json,本人为了方便规范与上传记录所以就写在js里面写死了,还请多包涵。
<script> /*在json里面写死了我的三个标签页*/ myjson = { "service":[{ "iden":"s1", "name":"163官网", "srcfrom":"http://www.163.com" }, { "iden":"s2", "name":"126官网", "srcfrom":"http://www.126.com" }, { "iden":"s3", "name":"虎扑官网", "srcfrom":"http://hoopchina.com" }] } $(document).ready(function(){ /*添加标签页的功能*/ $(".add").click(function(){ var flag = 0; var t_temp = -1; var thisid = $(this).attr("id");//获取点击对应标签页的ID var temp=0; for (var i = myjson.service.length - 1; i >= 0; i--) { //把对应点击的控件与标签页绑定起来,记录i(哪一个)为temp if((thisid)===(myjson.service[i].iden)){ temp=i; break; }; } //把所有标签页都移除active属性,在新添加的里面直接active $("#myTab li").removeClass("active"); $("#myTabContent div").removeClass("in active"); html="<li class='active' id='lflag"+temp+"'><a href='#"+myjson.service[temp].name+"' data-toggle='tab'><div style='font-weight: bold;'>"+myjson.service[temp].name+" <span id ='s_remove' onclick='DeleteDiv(this)' class='glyphicon glyphicon-remove'></span></div></a></li>" html1="<div id='"+myjson.service[temp].name+"' class='tab-pane fade in active' id='ios'><iframe style='width:1500px;height:800px;' src='"+myjson.service[temp].srcfrom+"'></iframe></div>" /*遍历所有的标签页,若已经存在,那么就直接加active掉,不需要再次添加*/ $("#myTab li").each(function(){ if($(this).attr("id")===("lflag"+temp)){ flag = 1; t_temp = temp; } }) if (flag===1) { $("#lflag"+t_temp).addClass("active"); var f_temp = ($("#lflag"+t_temp).children().attr("href")).replace("#",""); console.log(f_temp); $("#"+f_temp).addClass("in active"); }else{ $("#myTab").append(html); $("#myTabContent").append(html1); } }) }) </script>
<script> /*标签页右边小叉叉的关闭标签页的功能*/ function DeleteDiv(obj){ var idParent1 = $(obj).parent().parent().parent().attr("id");//通过获取点击标签页叉叉父类的id,remove掉 var idParent2 = $(obj).parent().parent().attr("href"); $("#"+idParent1).remove(); $("#"+idParent2.replace("#","")).remove();//这里必须注意一下,用jq选择器的时候,选择id的一定要注意“#”符号,可能会导致字符串拼接出现问题,可以先只拿除了特殊符号的字母,再加上# $("#myTab li:last").addClass("active"); var idChildren = $("#myTab li:last").children().attr("href"); $("#"+idChildren.replace("#","")).addClass("in active"); } </script>
<style>#s_remove:hover{color:#EEB422;};</style>上面代码直接复制即可运行查看效果
通过这次学习,总结出一个问题:jq选择器必须注意字符串拼接的问题,注意特殊符号的连接。
这次的小试牛刀还是有很多不足的地方,后面会继续改进。
相关文章推荐
- jQuery 中的 Ajax 全局事件 当用户点击页面上某一按钮请求数据时,在页面上显示 loading... ,页面加载完成后隐藏
- jquery 触发a标签点击事件,弹出页面;不被浏览器屏蔽拦截的打开窗口的方法
- jquery页面点击激发事件获取属性显示在input标签里面
- 实现点击JSP页面的ul标签切换iframe
- jquery如何在页面加载完成后模拟出一个鼠标点击事件?
- jquery 触发a标签点击事件,弹出页面
- jquery 获取页面点击事件 $("body").click()
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- jquery点击切换 页面多个点击切换 代码封装
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- iframe自适应内层页面高度,可响应页面中折叠点击事件,以及实现跨域的问题解决方案
- Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
- JS检测页面中哪个HTML标签触发点击事件的方法
- 使用jquery当页面打开时,将修改样式的点击事件绑定到Dom
- 记录--前端 页面 jquery 被点击按钮修改样式 其他默认
- Jquery实现“Iframe”页面切换
- 使用JS或jQuery模拟鼠标点击a标签事件代码
- 手机端页面中的a标签,在绑定点击事件时,会出现下划线?
- 2010-12-23 20:09 使用jquery获取iframe加载完成事件
- 使用JS或jQuery模拟鼠标点击a标签事件代码