<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</title>
<style type="text/css">
*{margin:0padding:0list-style-type:none}
a,img{border:0}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体"}
a{color:#333text-decoration:none}
a:hover{color:#3366cctext-decoration:underline}
h2{font-size:14pxtext-align:center}
/* tabbox */
.tabbox{width:432pxmargin:20px autoposition:relativeheight:171pxoverflow:hidden}
.tabbox .tabbtn{height:30pxbackground:url(images/tabbg.gif) repeat-xborder-left:solid 1px #dddborder-right:solid 1px #ddd}
.tabbox .tabbtn li{float:leftposition:relativemargin:0 0 0 -1px}
.tabbox .tabbtn li a,.tabbox .tabbtn li span{display:blockfloat:leftheight:30pxline-height:30pxoverflow:hiddenwidth:108pxtext-align:centerfont-size:12pxcursor:pointer}
.tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5border-right:solid 1px #d5d5d5border-top:solid 1px #c5c5c5}
.tabbox .tabbtn li.current a,.tabbox .tabbtn li.current span{border-top:solid 2px #ff6600height:27pxline-height:27pxbackground:#fffcolor:#3366ccfont-weight:800}
.tabbox .loading{height:40pxwidth:432pxtext-align:centerposition:absoluteleft:0top:120px}
.tabbox .tabcon{padding:10pxborder-width:0 1px 1px 1pxborder-color:#dddborder-style:solid}
.tabbox .tabcon li{height:24pxline-height:24pxoverflow:hidden}
.tabbox .tabcon li span{margin:0 10px 0 0font-family:"宋体"font-size:12pxfont-weight:400color:#ddd}
</style>
</head>
<body>
<h2>静态 选项卡 滑过事件</h2>
<div class="tabbox" id="statetab">
<ul class="tabbtn">
<li class="current"><a href="#">jquery 特效</a></li>
<li><a href="#">javascript 特效</a></li>
<li><a href="#">div+css 教程</a></li>
<li><a href="#">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="jquery 图片特效插件 异步读取图片TOP排行榜特效">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="jquery d出层 点击按钮d出层兼容IE和firefox浏览器">jquery d出层 点击按钮d出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a href="#" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
<li><span>▪</span><a href="#" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><span>▪</span><a href="#" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
<li><span>▪</span><a href="#" title=" javascript滚动图片按钮控制图片左右自动滚动">javascript滚动图片按钮控制图片左右自动滚动</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
<li><span>▪</span><a href="#" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#" title="用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox</a></li>
<li><span>▪</span><a href="#" title="CSS如何定位工程">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#" title="用div+css制作一个CSS3的泡泡动画按钮非常漂亮">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
<li><span>▪</span><a href="#" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
<li><span>▪</span><a href="#" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabbox end-->
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
//ajax 选项卡
$('#ajaxtab .tabbtn li a').click(function(){
var thiscity = $(this).attr("href")
$("#ajaxtab .loading").ajaxStart(function(){
$(this).show()
})
$("#ajaxtab .loading").ajaxStop(function(){
$(this).hide()
})
$('#ajaxtab .tabcon').load(thiscity)
$('#ajaxtab .tabbtn li a').parents().removeClass("current")
$(this).parents().addClass("current")
return false
})
$('#ajaxtab .tabbtn li a').eq(0).trigger("click")
//tab plugins 插件
$(function(){
//选项卡鼠标滑过事件
$('#statetab .tabbtn li').mouseover(function(){
TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))
})
$('#statetab .tabbtn li').eq(0).trigger("mouseover")
//选项卡鼠标滑过事件
$('#clicktab .tabbtn li').click(function(){
TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))
})
$('#clicktab .tabbtn li').eq(0).trigger("click")
function TabSelect(tab,con,addClass,obj){
var $_self = obj
var $_nav = $(tab)
$_nav.removeClass(addClass),
$_self.addClass(addClass)
var $_index = $_nav.index($_self)
var $_con = $(con)
$_con.hide(),
$_con.eq($_index).show()
}
})
</script>
</body>
</html>
开发者必用：F12或者安装bug查件！
去懒人图库等一些站长用的工具里找到幻灯片的图片，
使用方法：
使用方法：
1、在head区域引入样式表文件lrtk.css，js/pe.kenburns/themes/default/skin.min.css
2、在head区域引入jquery-1.5.2.min.js和js/pe.kenburns/jquery.pixelentity.kenburnsslider.min.js
3、初始化
<script>
jQuery(function($){
$(".peKenBurns").peKenburnsSlider({externalFont:true})
})
</script>
4、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可
两者没有必然的关系：Html5是最新的Html语言标准，目前绝大多数浏览器都已经支持HTML5
而Jquery是基于Javascript的一个框架，封装好了很多方法和功能
举个例子：这个网页设计比作一个人
HTML是由多种骨头(标签)组成的骨架。
HTML5是更多的新骨头(标签),同时去掉了以前觉得不好用的骨头.
JavaScript控制单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等)
jQuery是把一组常用动作编排成了一个招式。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）