如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
jquery实现基础的带关闭的选项卡
来源：互联网
2023-03-16 19:13:12 131
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的对应。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：php 删除html标签 下一篇：HTML怎么给文字添加下划线，以及设置大小写字体
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 435 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)