<!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">
<head>
<title>tab页切换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function switchTab(ProTag, ProBox) {
for (i = 1; i < 5; i++) {
if ("tab" + i == ProTag) {
document.getElementById(ProTag).getElementsByTagName("a")[0].className = "on";
} else {
document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
}
if ("con" + i == ProBox) {
document.getElementById(ProBox).style.display = "";
} else {
document.getElementById("con" + i).style.display = "none";
}
}
}
</script>
<style type="text/css">
*
{
padding: 0;
margin: 0;
line-height: 25px;
font-size: 12px;
list-style:none
}
#tabContainer
{
margin: 30px;
}
#tabContainer li
{
float: left;
width: 80px;
margin: 0 3px;
background: #efefef;
text-align: center;
}
#tabContainer a
{
display: block;
}
#tabContainer a.on
{
background: pink;
}
</style>
</head>
<body>
<div id="tabContainer">
<ul>
<li id="tab1"><a href="#" class="on" onclick="switchTab('tab1','con1');this.blur();return false;">
命运</a></li>
<li id="tab2"><a href="#" onclick="switchTab('tab2','con2');this.blur();return false;">
运势</a></li>
<li id="tab3"><a href="#" onclick="switchTab('tab3','con3');this.blur();return false;">
缘分</a></li>
<li id="tab4"><a href="#" onclick="switchTab('tab4','con4');this.blur();return false;">
人生</a></li>
</ul>
<div style="clear: both">
</div>
<div id="con1">
命运是个神马玩意儿...
</div>
<div id="con2" style="display: none">
霉运也是一种运气...
</div>
<div id="con3" style="display: none">
缘份纯粹是蒙人的东西...
</div>
<div id="con4" style="display: none">
人生就是人"生"出来之后的过程...
</div>
</div>
</body>
</html>
分享到：
相关推荐
2. 触摸事件优化：处理触摸事件时，防止滚动事件的默认行为（`e.preventDefault()`），以确保只有Tab切换而不会触发页面滚动。 3. 响应式设计：确保滑动切换在不同屏幕尺寸和设备上都能良好工作，可能需要调整Tab...
在微信小程序开发中，创建一个可以左右滑动切换的多tab页面是一项常见的需求，它能够为用户提供更加直观和便捷的导航体验。这个源码示例就是针对这一需求的一个实现，让我们来深入了解一下其中的关键知识点。 1. **...
综上所述，"tab标签图片切换特效"结合了有效的用户界面设计和JavaScript编程技巧，以提供一种高效且吸引人的内容展示方式。通过理解和实践这些概念，开发者可以创建出更加动态、互动的网页应用。
在移动应用开发领域，Mui和H5+是两种常见的技术栈，用于构建原生感观的Hybrid APP。本篇文章将深入探讨如何利用Mui和H5+...不断实践和学习，你将能掌握更多关于Mui和H5+的开发技巧，为用户提供更优秀的移动应用体验。
微信小程序小技巧系列《一》幻灯片，tab导航切换： http://www.wxapp-union.com/portal.php?mod=view&aid=70 微信小程序小技巧系列《二》show内容展示，上传文件编码问题 ： ...
【标题解析】 "下拉刷新，tab切换_企业城微信小程序js代码...通过研究这个源码包，开发者不仅可以学习到微信小程序的基本开发技巧，还能深入了解下拉刷新和Tab切换这两种常见交互的实现方式，提升自己的前端开发技能。
通过这种方式，我们可以实现一个简洁且响应式的tab切换效果。 这个实现方法的优点是代码量小，易于理解和维护。同时，通过CSS的伪类选择器，我们可以轻松地添加更多的交互效果，如过渡动画，以提升用户体验。 总的...
- **JavaScript**：使用JavaScript库如jQuery或框架如React、Vue、Angular等，可以实现Tab的动态切换效果，以及响应式设计，确保在不同屏幕尺寸下都有良好的显示效果。 - **响应式设计**：通过媒体查询（Media ...
本文将深入探讨如何利用jQuery实现Tab切换，并分享一些适用于PC和移动端的技巧。 一、jQuery Tab切换基础 1. HTML结构：首先，我们需要创建一个基础的HTML结构，通常包括一个容器元素（如div）来包裹所有的Tab和...
这篇博客的标题提到了"小巧的js、Tab"，这暗示我们将探讨一个使用JavaScript实现的轻量级Tab切换功能。JavaScript是一种广泛用于网页动态效果和交互的编程语言，而Tab切换是网页设计中常见的用户界面元素，允许用户...
Tab组件是UI设计中的一个重要部分，它允许用户通过不同的标签页来组织和切换内容，使得复杂的信息结构变得易于理解和操作。在本示例中，开发者可能遇到了如何在Tab的下方绘制一条下划线，并且这个下划线能随着Tab的...
Ajax Tab页滑动门是一种常见的网页交互设计，它结合了Ajax技术、JavaScript库（如MooTools）和HTML/CSS布局来实现...这个小例子可以帮助你理解如何结合Ajax、JavaScript库和前端设计技巧来提升网页的交互性和用户体验。
总之，使用Zepto.js实现tab切换是前端开发中的一个小技巧，但背后包含的原理却是前端编程的基石。通过掌握这一技巧，我们可以将内容分组，优化用户的浏览体验，并最终构建更加友好和直观的交互界面。对于刚开始接触...
可以通过设置一个标记变量来防止短时间内再次触发相同的Tab切换逻辑。 6. **响应式设计**：考虑到不同设备和屏幕尺寸，可能需要对Tab布局进行适配。这可能涉及到媒体查询（`@media`）和响应式布局技巧，确保在手机...
TAB菜单，顾名思义，是以标签页的形式展示内容，允许用户通过简单的触摸或滑动在不同的功能区域之间切换。在手机触屏上，这种交互方式既节省空间又易于操作，是移动端UI设计中的重要组成部分。 一、TAB菜单的基本...
【微信小程序-毕设期末大作业】涉及到的是微信小程序开发中的关键功能——下拉刷新与Tab切换。在本文中，我们将深入探讨这两个核心知识点，并结合实际应用，详细讲解如何实现这些功能。 一、下拉刷新（Pull-to-...
这说明了项目设计上的一个小技巧，旨在增加页面动态效果的多样性。 ### 知识点三：JavaScript中生成随机数的方法 1. **`randint`函数：** 这个函数通过接受两个参数`m`和`n`，生成一个`m`到`n`之间的随机整数。其...
CSS中使用的一些技巧，比如隐藏显示内容、定位等，都是实现tab切换特效不可或缺的部分。 详细分析示例代码，可以发现以下几点重要的知识点： 1. HTML结构：代码中首先定义了tab标签和对应的内容区域。其中，tab...
【标题】"下拉刷新，tab切换"是一个微信小程序的案例，主要涵盖了用户界面的动态交互功能，包括下拉刷新和Tab切换。在移动应用开发，尤其是微信小程序开发中，这些功能是提升用户体验的关键要素。 【下拉刷新】是...
在登录注册页面中，CSS还可以用于制作tab切换的效果，比如使用`:hover`、`:active`和`:focus`伪类来响应鼠标悬停、点击和获取焦点的状态，同时使用`display`或`visibility`属性控制不同tab内容的显示和隐藏。...