<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<style>
body{
margin:10px;
padding:10px;
}
.tabs{
height:500px;
border: 1px solid #d2d2d2;
}
.icon{
background-image:url(ui-icons_222222_256x240.png);
float:right;
width:16px;
height:16px;
margin:7px 0;
cursor:pointer;
}
.tabs ul{
margin:0;
padding:2px 0 0 0;
border-bottom: 1px solid #d2d2d2;
background:#efefef;
height:30px;
}
.tabs li{
margin:0 2px;
padding: 0 5px;
list-style: none;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
border-left: 1px solid #d2d2d2;
float:left;
text-align:center;
height:30px;
line-height:30px;
display:block;
font-size:14px;
}
.clear{
clear:both;
}
li.active{
background:#fff;
margin-bottom:-1px;
height:30px
}
.icon-close{
background-position:-96px -128px;
}
.cnt{
display:none;
margin:2px;
}
</style>
<script type="text/javascript">
$(function(){
$('li').click(function(){
$('li.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('t')).show().siblings('div').hide();
});
$('li span.icon-close').click(function(){
var p = $(this).parent();
p.remove();
$('#' + p.attr('t')).remove();
});
});
</script>
</head>
<body>
<div id='kkk' class='tabs'>
<ul>
<li t='tab0'>用户管理<span class='icon icon-close'></span></li>
<li t='tab1'>产品管理<span class='icon icon-close'></span></li>
<li t='tab2'>系统管理<span class='icon icon-close'></span></li>
<li t='tab3'>业务管理<span class='icon icon-close'></span></li>
<li t='tab4'>播放dfsdfsdf管理<span class='icon icon-close'></span></li>
</ul>
<div id='tab0' class=cnt>aaaa</div>
<div id='tab1' class=cnt>bbbb</div>
<div id='tab2' class=cnt>cccc</div>
<div id='tab3' class=cnt>dddd</div>
<div id='tab4' class=cnt>eeee</div>
</div>
</body>
</html>
分享到：
相关推荐
**jQuery Tabs插件 PWS Tabs** 是一个用于创建交互式、动态内容切换的JavaScript库，专为增强网页的用户体验而设计。它允许开发者轻松地将多个面板组织成一个可滚动的选项卡结构，使得用户可以方便地在不同内容之间...
"Ajax无刷新内容tabs标签切换"是一种技术，它允许用户在不重新加载整个网页的情况下切换页面内容，显著提升了交互性与效率。这种技术通常用于构建诸如导航菜单、选项卡式界面等元素，让用户能够快速浏览和操作大量...
本主题将深入探讨如何使用Swiper实现tabs标签页的切换效果。 一、Swiper简介 Swiper是由IDangerous开发的一款免费且开源的JavaScript库，它专门用于创建响应式的滑动内容，如图片轮播、内容滑动、tab切换等。Swiper...
在Vue.js框架中，动态组件和Tabs组件是两个非常重要的概念，它们在构建复杂和可扩展的用户界面时起着关键作用。动态组件允许我们根据应用程序的状态或用户交互来动态地加载和切换不同的组件，而Tabs组件则常用于创建...
本文将详细解析"多级嵌套选项卡_多级嵌套舌签Tabs"的设计与实现，以及如何确保其在不同浏览器中的兼容性和可重用性。 首先，"多级嵌套"意味着在选项卡组件中，每个主要的选项卡都可以展开为次级选项卡，而次级选项...
使用上也非常简单，在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件，在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
**标题：“标签(Tabs)实现多页面切换”** 在网页设计中，标签（Tabs）是一种常见的用户界面元素，用于组织和展示多个相关的但内容独立的部分。这种设计模式允许用户通过点击不同的标签来切换查看不同页面，提高用户...
标题提到的“vue 页面tabs切换,替换iframe”，就是指用Vue的特性和组件来实现更加现代和灵活的Tab切换功能，避免使用iframe。下面将详细介绍如何使用`vue-router`的`router-view`和`keep-alive`来实现这一目标。 ...
jQuery UI中的Tabs组件是一种强大的工具，用于将网页内容组织成可切换的选项卡。这个组件不仅易于使用，而且高度可定制，可以根据项目需求进行样式调整。以下是对`jQuery的tabs使用方法`的详细讲解。 首先，为了...
jQuery 的 Tabs 插件是一种广泛使用的前端开发工具，它能够帮助开发者轻松地创建功能丰富的标签式界面。在网页设计中，这种布局方式可以有效地组织和展示大量内容，提高用户体验，让用户能够快速浏览和切换不同的...
在本示例中，"jQuery tabs切换源码"是指使用jQuery实现的一个选项卡（tabs）功能，它允许用户通过点击不同的标签来切换显示不同的内容区域。 在jQuery中，实现tabs切换通常会涉及到以下几个核心知识点： 1. **选择...
本实践将深入探讨如何在基于Vue Element UI的后台管理系统中实现动态Tabs功能。 Vue.js是一个轻量级的渐进式框架，它的核心库专注于视图层，易于上手且扩展性强。Element UI则是基于Vue.js的一套美观、实用的UI组件...
在本文中，我们将深入探讨基于jQuery的tabs切换功能，这是网页设计中常见的一种交互元素，用于组织和展示分块内容。jQuery库简化了JavaScript的许多复杂操作，使得实现这种功能变得简单而高效。 首先，"基于jQuery ...
在网页设计中，jQuery UI 的 tabs 是一个非常实用的功能，它允许我们将多个内容区域组织成可切换的选项卡，提供了一种整洁的方式来展示大量信息。然而，标准的 jQuery tabs 默认是横向排列的，但有时为了适应页面...
### JavaScript源代码：React antd tabs切换造成子组件重复刷新 #### 问题描述 在使用React结合Ant Design框架开发Web应用程序时，可能会遇到一个常见问题：当使用`Tabs`组件时，频繁地在不同的`TabPane`之间进行...
jQuery UI中的Tabs组件是一个强大的网页交互元素，它允许开发者创建功能丰富的标签页式界面。这个压缩包包含了实现jQuery Tabs所需的基本文件，包括`tabs.js`（核心插件脚本）、`core.js`（jQuery UI的核心库）以及`...
**jQuery EasyTabs.js 插件详解** jQuery EasyTabs.js 是一款功能强大且易于使用的轻量级插件，专为创建响应式的Tab式布局而设计。它允许开发者通过简单的配置选项和自定义事件来实现各种Tab切换效果，为网页内容...
在探讨如何使用JQUERY Tabs插件宿主IFRAMES之前，首先需要了解什么是JQUERY Tabs插件和IFRAME。JQUERY Tabs插件是JQUERY UI库中的一个组件，它允许开发者轻松地在一个网页上添加选项卡式界面，提升用户体验。而...
标题中的 "Jquery-tabs 最炫 tabs 实现源码" 指的是使用 jQuery UI 的 tabs 组件来创建一种具有视觉吸引力的选项卡式布局。jQuery UI 的 tabs 组件允许开发者轻松地将一组相关的页面内容组织成整洁的选项卡结构，每...
在网页设计中，jQuery的Tabs控件是一种常用的交互元素，用于组织和展示多部分内容，比如文本、图片或视频，让用户可以方便地切换查看。这个控件通过简洁的API和丰富的自定义选项，使得开发者能够轻松地创建出具有...