jquery初学完成tap标签+iframe前端页面的点击切换事件

来源：互联网发布：51单片机流水灯接线图编辑：程序博客网时间：2024/06/09 17:07

这是我接触前端的第一个自编的tap标签页+iframe的切换功能，用的bootstrap的tap标签，由于源代码没有点击触发事件和删除添加标签页的功能，并且没有绑定iframe视图界面。

所以就小试牛刀一下，很多地方写的不好，还请多指出改正，谢谢

<!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");//获取点击对应标签页的IDvar temp=0;for (var i = myjson.service.length - 1; i >= 0; i--) {//把对应点击的控件与标签页绑定起来，记录i（哪一个）为tempif((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选择器必须注意字符串拼接的问题，注意特殊符号的连接。

这次的小试牛刀还是有很多不足的地方，后面会继续改进。

阅读全文

0 0