ul,li{
margin: 0;
padding: 0;
list-style:none;
}
#tabFirst li{
float: left;
background-color:#333333;
padding: 1px;
margin-right: 7px;
color: white;
border: 1px solid white;
}
div.contentinFirst{
clear: left;
background-color:#6e6e6e;
color: white;
width:300px;
height:200px;
padding: 2px;
display:none;
}
#tabFirst li.tabin{
background-color:#6e6e6e;
border: 1px solid #6e6e6e;
}
div.contentin{
display:block;
}
#tabSecond li{
float: left;
background-color:white;
padding: 1px;
margin-right: 7px;
color: blue;
cursor:pointer;
}
div.contentinSecond{
clear: left;
background-color:#f2f6f8;
color: white;
padding: 10px;
width:300px;
height:100px;
border:#000000 solid 1px;
position:relative;
top: -1px;
}
#tabSecond li.tabin{
background-color:#f2f6f8;
border: 1px solid #6e6e6e;
border-bottom: 0;
z-index: 100;
position:relative;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签页效果</title>
<script language="javascript" src="jquery-1.4.1.min.js" ></script>
<script language="javascript" src="tab.js" ></script>
<link type="text/css" href="tab.css" rel="stylesheet" />
<script>
//静态装载
$(document).ready(function(){
var timeoutid;
$(" #tabFirst li").each(function(index){
$(this).mouseover(function(){
var aaa = $(this);
timeoutid = setTimeout(function(){
$("div.contentin").removeClass("contentin");
$("#tabFirst li.tabin").removeClass("tabin");
$("div.contentinFirst").eq(index).addClass("contentin");
aaa.addClass("tabin");
}, 300);
}).mouseout(function(){
clearTimeout(timeoutid);
});
});
});
//动态装载
</script>
</head>
<body>
<ul id="tabFirst">
<li class="tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="contentin contentinFirst">我是标签1</div>
<div class="contentinFirst">我是标签2</div>
<div class="contentinFirst">我是标签3</div>
<br />
<br />
<br /><br />
<ul id="tabSecond">
<li class="tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>装入远程页面</li>
</ul>
<div class="contentinSecond" />
</body>
</html>
分享到：
相关推荐
1. **滑动效果**：如标题所示，jQuery生成器可能包含生成滑动效果的功能，如页面元素的淡入淡出、滑上滑下等。这些效果可以通过`.slideToggle()`, `.slideUp()`, `.slideDown()`等方法实现。 2. **滚动效果**：无缝...
在“简单jQuery生成二维码”的场景中，jQuery将作为我们的主要工具，帮助我们更方便地与页面元素交互。 `jquery.qrcode.js`是专门为jQuery设计的一个插件，它的主要功能就是生成二维码。这个插件接收一串数据和一些...
我们将基于提供的标题"Jquery生成缩略图画廓"和描述，讨论如何实现这一功能，特别是涉及到动态绑定图片和对多种图片格式的支持。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
在本资源"jquery标签云无规则样式.rar"中，主要涉及到的是如何使用JavaScript库jQuery和CSS样式来创建一个具有独特视觉效果的标签云。下面我们将深入探讨这一主题。 一、jQuery简介 jQuery是一个高效、简洁的...
在IT行业中，jQuery库是广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本资源"jQuery动态添加删除编辑标签代码.zip"提供了一种实现动态管理标签页的方法，尤其适用于需要用户交互性高的Web...
本文将详细探讨如何使用jQuery生成条形码，并提供相关的知识点。 一、jQuery简介 jQuery是由John Resig创建的一个轻量级、高性能的JavaScript库，它的核心理念是"Write Less, Do More"。jQuery简化了JavaScript的...
本教程将聚焦于如何利用jQuery创建一个无规则的标签云，这种标签云不仅视觉效果独特，而且能有效地展示和突出网站上的关键词或主题。 首先，我们需要了解标签云的基本概念。标签云是一种可视化技术，用于显示网站或...
在本主题中，我们将深入探讨如何使用jQuery生成图形报表插件，特别是基于Highcharts的实现。 Highcharts是一款强大的图表库，完全基于JavaScript，支持多种类型的图表，包括柱状图、折线图、饼图、散点图等，并且...
使用jQuery动态生成云标签，并赋予相应的权重效果： ```javascript $(document).ready(function() { var tags = [ { text: "JavaScript", weight: 8 }, { text: "HTML", weight: 6 }, // ... 更多标签数据 ]; ...
这个简单的例子展示了如何使用jQuery响应用户回车键，动态地生成新的HTML标签。你可以根据实际需求修改此代码，比如更改创建的标签类型、添加动画效果或验证输入内容等。这个技术广泛应用于各种交互式Web应用中，...
jQuery咖啡杯标签云效果是一种独特的视觉呈现方式，它将传统的标签云变得更加生动有趣。这个效果模拟了咖啡杯中热气腾腾的雾气在空气中缓慢飘散的情景，为网页的标签展示添加了一丝动态美。这个效果主要依赖于jQuery...
在本文中，我们将深入探讨如何使用JavaScript库JQuery来实现一个经典的Tab标签切换效果。Tab切换效果是网页设计中常用的一种交互元素，它允许用户在不同的内容区域之间轻松导航，而无需加载新的页面。让我们逐步解析...
首先，jQuery是一个轻量级的JavaScript库，它提供了简洁的API，使得DOM操作、事件处理、动画效果以及AJAX交互变得更加容易。在创建标签系统的场景下，jQuery可以帮助我们快速响应用户的键盘输入和交互行为。 1. **...
总的来说，这个项目结合了jQuery的便利性、ECharts的强大可视化能力和HTML5的File API，为用户提供了一个可以上传图片并自动生成标签云的交互式应用。无论是用于展示图片信息，还是数据分析，都能提供直观且吸引人的...
开发者可能在其中定义了处理图片上传、生成标签云以及处理用户交互的函数。 总的来说，这个项目结合了前端开发的多个技术领域，包括jQuery交互、ECharts数据可视化和HTML5的文件API。它提供了一种新颖的方式来展示...
这个“jQuery生成二维码包”是为了帮助开发者在网页上快速方便地生成二维码，通常用于数据编码，使得用户可以通过智能手机扫描来访问网页、下载文件或存储联系信息等。 首先，我们来看`jquery.min.js`。这是jQuery...
JavaScript，尤其是jQuery库，将处理用户输入并动态生成标签。 jQuery的使用通常始于引入库的脚本文件，如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接着，我们可以...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本实例将探讨如何利用jQuery来动态生成树形结构，这对于展示层次化数据或者构建导航菜单非常实用。 ...
- **添加动画效果**：可以在二维码生成后添加一些动画效果，提高用户体验。 #### 四、注意事项 - 在使用`canvas`渲染方式时，请确保用户的浏览器支持Canvas。 - 如果Logo图片较大或加载较慢，可能会导致二维码生成...
jQuery开发交互效果页面--手机号抽奖 jQuery是目前最流行的JavaScript库之一，广泛应用于Web前端开发中。通过本次实训，我们将学习如何使用jQuery开发一个交互效果页面--手机号抽奖。 知识点1： jQuery下载和引入...