您的位置：首页 > Web前端 > JQuery

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

2017-07-08 19:53 781 查看

这是我接触前端的第一个自编的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");//获取点击对应标签页的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 javascript bootstrap html

相关文章推荐

新的分享

章节导航