<!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{
height:29px;
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;
}
#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>
分享到：
相关推荐
<li><a href="#tab2">选项卡2</a></li> <!-- 更多选项卡标题... --> <div class="tab-content"> <div id="tab1" class="tab active">内容1 <div id="tab2" class="tab">内容2 <!-- 更多内容面板... --> `...
<li><a href="#tab2">选项卡2</a></li> <li><a href="#tab3">选项卡3</a></li> <div id="tab1" class="tab-content">内容1 <div id="tab2" class="tab-content">内容2 <div id="tab3" class="tab-content">...
总结来说，实现“可编辑选项卡TAB”涉及到了前端开发中的多项关键技术，包括Flex布局、DOM操作、事件监听、状态管理和用户交互设计。通过巧妙地结合这些技术，我们可以创建出既美观又实用的动态可编辑选项卡，为用户...
CSS Tab选项卡的实现可以完全不依赖JavaScript，利用`:target`伪类来切换内容的显示。当用户点击某个标签时，对应的ID将会添加到URL的哈希部分，`:target`伪类可以检测这个变化并隐藏其他内容。 3. **响应式设计**...
"Tab选项卡"是这种交互模式的一种实现方式，通常在网页顶部或侧边设置，每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签：每个选项卡都...
首先，Tab选项卡的实现通常涉及到`TabHost`、`TabWidget`和`FrameLayout`三个主要组件。`TabHost`是整个Tab布局的容器，`TabWidget`用于显示各个Tab按钮，而`FrameLayout`则用来放置每个Tab下面对应的视图。 1. **...
2. CSS样式：使用CSS来定义选项卡的外观，包括颜色、字体、边框、过渡效果等，以达到美观的效果。 3. JavaScript/jQuery：编写JavaScript代码以实现选项卡的交互功能，如点击切换、内容加载等。 4. JSP语法：了解...
MFC 中使用 Tab 控件实现选项卡，外加图像控件显示图像 在 MFC 中使用 Tab 控件可以实现选项卡的功能，从而提高用户体验。本文将详细介绍如何在 MFC 中使用 Tab 控件实现选项卡，并在子对话框中使用图像控件显示...
这个压缩包“HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip”显然是为了演示如何实现这样的功能。下面将详细解释其中涉及的主要知识点。 首先，我们关注的是HTML...
实现"TAB选项卡后台菜单效果"通常涉及以下技术： 1. HTML结构：首先，我们需要创建一个包含各个选项卡的HTML结构。每个选项卡通常是一个`<li>`元素，而整个选项卡组则包裹在`<ul>`或`<nav>`标签中。每个选项卡链接...
2. CSS样式：layui框架提供了一套完整的CSS样式表，用于美化Tab选项卡的外观。这包括颜色、字体、边框、背景等视觉效果。开发者可以通过自定义CSS类或者修改layui的默认样式来自定义选项卡样式。 3. JavaScript交互...
不规则TAB选项卡JS代码是指使用JavaScript实现的一种具有独特设计风格的选项卡功能。JavaScript是网页开发中的重要脚本语言，它允许我们动态更新内容、响应用户交互并实现复杂的网页逻辑。 不规则TAB选项卡的设计...
<li><a href="#" data-target="tab2">选项卡2</a></li> ... <div id="tab1" class="tab-content">... <div id="tab2" class="tab-content">... ... ``` 2. **CSS样式**： 使用CSS来美化选项卡，包括设置...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量相关但不同时显示的信息。通过使用JavaScript和CSS，我们可以创建交互性强、视觉效果良好的选项卡组件。下面将详细介绍如何利用这两种技术...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示大量信息。jQuery Tab 插件就是一种轻量级的解决方案，能够帮助开发者轻松实现多种交互功能，如鼠标滑过、点击切换、自动切换以及数据回调。本...
3. JavaScript/jQuery文件：这个文件实现了选项卡的交互逻辑，例如监听用户的点击事件，动态显示或隐藏相应的内容区域，同时更新Tab的视觉反馈，比如改变选中Tab的背景色或添加边框等。 学习这个代码示例，你可以...
本文将深入探讨“选项卡tab标签样式”在QQ在线客服代码中的应用，帮助你理解如何创建一个既实用又美观的在线客服系统。 选项卡（Tab）是一种常见的用户界面组件，它允许用户在多个视图之间切换，而无需打开新的窗口...
此外，为了实现选项卡的选中状态，我们可以使用伪类选择器，如`:hover`、`:active`和`:focus`来改变选中tab的样式。同时，可以使用`:target`伪类来控制内容区域的显示与隐藏，例如： ```css .content { display: ...
2. **创建Fragment**：为每个选项卡创建一个`Fragment`子类，并实现相应的UI和逻辑。每个`Fragment`都应该有与之关联的布局文件。 3. **设置ViewPager**：创建一个`ViewPager`实例，用它来管理各个`Fragment`的滑动...
2. **CSS选择器与盒模型**：为了实现TAB选项卡的效果，我们需要对不同的状态（如选中、未选中）应用不同的样式。这需要用到CSS选择器，如类选择器`.active`，以及理解盒模型（包括`padding`、`border`和`margin`）以...