<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script src="jquery.js"></script>
<style>
:hover{} /*for ie7*/
html,body,ul,li{
margin:0;
padding:0px;
}
ul,li{
list-style:none;
}
#wrap{
margin:10px;
width:500px;
border:1px solid rgb(108, 146, 173);
}
#wrap .tab{
overflow:hidden;
margin-bottom:-1px;
background-color:rgb(234, 240, 253);
}
#wrap .tab li{
float:left;
}
#wrap .tab li a{
display:inline-block;
font-weight:bold;
color:rgb(0, 85, 144);
height:30px;
line-height:30px;
padding:0px 20px;
border-right:1px solid rgb(108, 146, 173);
cursor:pointer;
}
#wrap .tab li a:hover{
background-color:orange;
}
#wrap .tab li a.selected{
background-color:white;
*position:relative;
}
#wrap .content{
padding:10px;
border-top:1px solid rgb(108, 146, 173);
}
#wrap .content > div{
height:200px;
display:none;
}
#wrap .content > div.selected{
display:block;
}
</style>
<script>
$(function(){
$('#wrap').delegate('.tab li','click',function(){
var $self=$(this);
//设置tab
$self.siblings().find('a').removeClass('selected');
$self.find('a').addClass('selected');
//设置content
var $contents=$('#wrap .content > div');
$contents.removeClass('selected');
$contents.eq($self.index()).addClass('selected');
});
});
</script>
</head>
<body>
<div id="wrap">
<ul class="tab">
<li><a class="selected">tab1</a></li>
<li><a>tab2</a></li>
<li><a>tab3</a></li>
<li><a>tab4</a></li>
</ul>
<div class="content">
<div class="selected">content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在网页设计中，选项卡（Tab）组件是一个常见的交互元素，它允许用户在不同的内容区域之间切换，而无需刷新整个页面。在这个主题中，我们将深入探讨如何使用 HTML 和 CSS 实现一个简洁的选项卡功能。 首先，HTML ...
总结来说，实现“可编辑选项卡TAB”涉及到了前端开发中的多项关键技术，包括Flex布局、DOM操作、事件监听、状态管理和用户交互设计。通过巧妙地结合这些技术，我们可以创建出既美观又实用的动态可编辑选项卡，为用户...
总结，HTML实现Tab选项卡结合了HTML、CSS和JavaScript技术，通过合理的设计和交互逻辑，可以创建出既美观又实用的网页组件。自动和手动切换功能使用户可以根据需求自由控制信息的显示，提升了网页的易用性。在实际...
CSS Tab选项卡的实现可以完全不依赖JavaScript，利用`:target`伪类来切换内容的显示。当用户点击某个标签时，对应的ID将会添加到URL的哈希部分，`:target`伪类可以检测这个变化并隐藏其他内容。 3. **响应式设计**...
首先，Tab选项卡的实现通常涉及到`TabHost`、`TabWidget`和`FrameLayout`三个主要组件。`TabHost`是整个Tab布局的容器，`TabWidget`用于显示各个Tab按钮，而`FrameLayout`则用来放置每个Tab下面对应的视图。 1. **...
"Tab选项卡"是这种交互模式的一种实现方式，通常在网页顶部或侧边设置，每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签：每个选项卡都...
这个压缩包“HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip”显然是为了演示如何实现这样的功能。下面将详细解释其中涉及的主要知识点。 首先，我们关注的是HTML...
总的来说，"漂亮的JSP TAB选项卡"是一个集美观和实用于一体的网页元素，它的实现涉及前端开发的多个方面，包括HTML、CSS、JavaScript、JSP以及响应式设计等技术。对于希望提升网页交互性的开发者来说，理解和掌握...
MFC 中使用 Tab 控件实现选项卡，外加图像控件显示图像 在 MFC 中使用 Tab 控件可以实现选项卡的功能，从而提高用户体验。本文将详细介绍如何在 MFC 中使用 Tab 控件实现选项卡，并在子对话框中使用图像控件显示...
实现"TAB选项卡后台菜单效果"通常涉及以下技术： 1. HTML结构：首先，我们需要创建一个包含各个选项卡的HTML结构。每个选项卡通常是一个`<li>`元素，而整个选项卡组则包裹在`<ul>`或`<nav>`标签中。每个选项卡链接...
配合Tab选项卡，可以在弹出层中实现内容的切换，比如在一个弹窗内展示多个独立的Tab页面。 "下拉菜单"和"垂直菜单"则是layui导航条（layui-nav）的一部分，它们用于创建多级导航结构。下拉菜单通常隐藏在主菜单项之...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量相关但不同时显示的信息。通过使用JavaScript和CSS，我们可以创建交互性强、视觉效果良好的选项卡组件。下面将详细介绍如何利用这两种技术...
不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言，它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...
本文将深入探讨“选项卡tab标签样式”在QQ在线客服代码中的应用，帮助你理解如何创建一个既实用又美观的在线客服系统。 选项卡（Tab）是一种常见的用户界面组件，它允许用户在多个视图之间切换，而无需打开新的窗口...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本...
**jQuery二级多级选项卡tab特效** 在网页设计中，选项卡是一种常见的用户界面元素，它可以帮助用户在有限的空间内组织和浏览大量信息。而二级多级选项卡则是这种交互方式的一种扩展，允许用户在主选项卡的基础上...
在网页设计中，Tab选项卡是一种常见的用户界面元素，它允许用户通过点击不同的标签来查看和操作相关的区域内容。在JavaScript（简称js）的帮助下，我们可以轻松实现这种动态切换效果，提高用户体验并有效组织页面...
在MATLAB中实现选项卡功能，主要依赖于`uitabgroup`和`uitab`这两个函数。`uitabgroup`是选项卡组容器，而`uitab`则用于创建单个选项卡。例如，以下代码可以创建一个包含两个选项卡的GUI： ```matlab fig = ...
此外，为了实现选项卡的选中状态，我们可以使用伪类选择器，如`:hover`、`:active`和`:focus`来改变选中tab的样式。同时，可以使用`:target`伪类来控制内容区域的显示与隐藏，例如： ```css .content { display: ...
本资源“jQuery多个选项卡tab切换代码.zip”提供了一种实现股票基金交易网站中常见选项卡切换效果的解决方案。选项卡切换是网页交互设计中的一个重要元素，能够有效地组织和展示大量信息，提升用户体验。 jQuery...