怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 342 JQUERY DREAMWEAVER
jquery实现基础的带关闭的选项卡
来源：互联网
2023-03-17 00:47:10 版权归原作者所有，如有侵权，请联系我们
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0 、FF 1.5 、Safari 2.0 、Opera 9.0 等。
工具/原料
- 电脑
- 前端HTML编辑工具
方法/步骤
第一步：实现思路。
1、需要引入jquery方便获取dom元素和操作dom元素。
2、首先创建一个页面，编写需要的样式和html元素和js
3、实现新增一个tab，主要是拼接HTML元素，当点击新增按钮时，将元素添加到存放tab的div中。
4、实现点击tab显示其对应的div中的内容。给tab添加单击事件，根据tab的序号借助jquery查找元素，并设置显示隐藏。
5、删除tab的实现。主要是借助于jquery查找元素和显示隐藏函数。通过隐藏实现删除的功能，也可以使用jquery的移除函数remove()移除元素。
第二步：代码实现。
具体代码如下所示：
主要分为三部分：
1、style主要是样式的设置
2、body中的HTML主体
3、js动态操作HTML的代码
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>可关闭的tab标签/title>
script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">/script>
style>
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
.nav{
line-height: 40px;
border-bottom: 1px solid #333333;
}
.sum{
display: none;
}
.list{
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #333333;
}
#tab{
position:relative;
height:50px;
background: beige;
}
#content{
position: relative;
}
.item{
display: none;
width: 100%;
height: 600px;
background-color: burlywood;
}
.tab-nav{
display: inline-block;
line-height:40px;
padding:0 10px
}
/style>
/head>
body>
!--可关闭的tab标签-->
div id="tab">
button onclick="addTab()">新增一个tab/button>
div class="tab-nav" num="1">
a href="javascript:;" onclick="showDiv(1)">新增1/a>
span style="padding-left: 10px" onclick="hideDiv(this,1)">X/span>
/div>
div class="tab-nav" num="2">
a href="javascript:;" onclick="showDiv(2)">新增2/a>
span style="padding-left: 10px" onclick="hideDiv(this,2)">X/span>
/div>div class="tab-nav" num="3">
a href="javascript:;" onclick="showDiv(3)">新增3/a>
span style="padding-left: 10px" onclick="hideDiv(this,3)">X/span>
/div>
div class="tab-nav" num="4">
a href="javascript:;" onclick="showDiv(4)">新增4/a>
span style="padding-left: 10px" onclick="hideDiv(this,4)">X/span>
/div>div class="tab-nav" num="5">
a href="javascript:;" onclick="showDiv(5)">新增5/a>
span style="padding-left: 10px" onclick="hideDiv(this,5)">X/span>
/div>
div class="tab-nav" num="6">
a href="javascript:;" onclick="showDiv(6)">新增6/a>
span style="padding-left: 10px" onclick="hideDiv(this,6)">X/span>
/div>
/div>
div id="content">
div class="item" style="display: block">首页/div>
div class="item">内容1/div>
div class="item">内容2/div>
div class="item">内容3/div>
div class="item">内容4/div>
div class="item">内容5/div>
div class="item">内容6/div>
/div>
script>
var num = 6;
function addTab(){
num = num 1;
var str = 'div class="tab-nav" num="' num '">'
'a href="javascript:;" onclick="showDiv(' num ')">新增' num '/a>'
'span style="padding-left: 10px" onclick="hideDiv(this,' num ')">X/span>/div>'
$("#tab").append(str);
var content = 'div class="item">内容' num '/div>';
$("#content").append(content);
}
function showDiv(number){
$('.item').hide();
$('.item').eq(number).show()
}
function hideDiv(obj,number){
var num=$(obj).parent().attr("num");
var num0=$(obj).parent().prev().attr("num");
var num1=$(obj).parent().next().attr("num");
$(obj).parent().remove();
if($('.item').eq(num).is(":visible")){
$('.item').hide();
if(num1){
$('.item').eq(num1).show()
}
else if(num0){
$('.item').eq(num0).show()
}
else{
$('.item').eq(0).show()
}
}
}
/script>
/body>
/html>
第三步：测试tab标签。
1、打开页面查看页面效果，默认存在6个tab页签。如图1所示
2、测试新增tab功能。点击新增按钮，新增tab7，测试成功。如图2所示
3、测试单击tab标签显示对应的内容。具体操作如图3,4,5
4、测试删除功能。如图
注意事项
- 注意序号的使用，借助于序号实现tab和div中内容content的对应。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：用jquery如何写轮播图 下一篇：jquery如何动态写入td内容
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 330 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 374 JQUERY