<!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. **响应式设计**...
这个压缩包“HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip”显然是为了演示如何实现这样的功能。下面将详细解释其中涉及的主要知识点。 首先，我们关注的是HTML...
首先，Tab选项卡的实现通常涉及到`TabHost`、`TabWidget`和`FrameLayout`三个主要组件。`TabHost`是整个Tab布局的容器，`TabWidget`用于显示各个Tab按钮，而`FrameLayout`则用来放置每个Tab下面对应的视图。 1. **...
"Tab选项卡"是这种交互模式的一种实现方式，通常在网页顶部或侧边设置，每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签：每个选项卡都...
总的来说，"漂亮的JSP TAB选项卡"是一个集美观和实用于一体的网页元素，它的实现涉及前端开发的多个方面，包括HTML、CSS、JavaScript、JSP以及响应式设计等技术。对于希望提升网页交互性的开发者来说，理解和掌握...
实现"TAB选项卡后台菜单效果"通常涉及以下技术： 1. HTML结构：首先，我们需要创建一个包含各个选项卡的HTML结构。每个选项卡通常是一个`<li>`元素，而整个选项卡组则包裹在`<ul>`或`<nav>`标签中。每个选项卡链接...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量相关但不同时显示的信息。通过使用JavaScript和CSS，我们可以创建交互性强、视觉效果良好的选项卡组件。下面将详细介绍如何利用这两种技术...
不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言，它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...
MFC 中使用 Tab 控件实现选项卡，外加图像控件显示图像 在 MFC 中使用 Tab 控件可以实现选项卡的功能，从而提高用户体验。本文将详细介绍如何在 MFC 中使用 Tab 控件实现选项卡，并在子对话框中使用图像控件显示...
本文将深入探讨“选项卡tab标签样式”在QQ在线客服代码中的应用，帮助你理解如何创建一个既实用又美观的在线客服系统。 选项卡（Tab）是一种常见的用户界面组件，它允许用户在多个视图之间切换，而无需打开新的窗口...
配合Tab选项卡，可以在弹出层中实现内容的切换，比如在一个弹窗内展示多个独立的Tab页面。 "下拉菜单"和"垂直菜单"则是layui导航条（layui-nav）的一部分，它们用于创建多级导航结构。下拉菜单通常隐藏在主菜单项之...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本...
**jQuery二级多级选项卡tab特效** 在网页设计中，选项卡是一种常见的用户界面元素，它可以帮助用户在有限的空间内组织和浏览大量信息。而二级多级选项卡则是这种交互方式的一种扩展，允许用户在主选项卡的基础上...
在网页设计中，Tab选项卡是一种常见的用户界面元素，它允许用户通过点击不同的标签来查看和操作相关的区域内容。在JavaScript（简称js）的帮助下，我们可以轻松实现这种动态切换效果，提高用户体验并有效组织页面...
3. JavaScript/jQuery文件：这个文件实现了选项卡的交互逻辑，例如监听用户的点击事件，动态显示或隐藏相应的内容区域，同时更新Tab的视觉反馈，比如改变选中Tab的背景色或添加边框等。 学习这个代码示例，你可以...
在MATLAB中实现选项卡功能，主要依赖于`uitabgroup`和`uitab`这两个函数。`uitabgroup`是选项卡组容器，而`uitab`则用于创建单个选项卡。例如，以下代码可以创建一个包含两个选项卡的GUI： ```matlab fig = ...
此外，为了实现选项卡的选中状态，我们可以使用伪类选择器，如`:hover`、`:active`和`:focus`来改变选中tab的样式。同时，可以使用`:target`伪类来控制内容区域的显示与隐藏，例如： ```css .content { display: ...