jquery选项卡插件制作滑动slide选项卡切换和fade选项卡切换等



121 480 161



特效描述:选项卡插件 滑动slide 选项卡切换 fade选项卡切换,jquery选项卡插件制作多种选项卡切换特效,滑动slide选项卡切换、fade选项卡切换、自动选项卡切换等。jquery插件、jquery下载。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ks-switch.pack.js"></script>

2. HTML代码

<script type="text/javascript">
$(function($){
	$("#switchBox").switchTab();
	$("#switchBox2").switchTab({effect: "fade"});
	$("#switchBox3").switchTab({titCell: "dt a", trigger: "mouseover", delayTime: 0});
	$("#switchBox4").switchTab({titCell: "dt a", effect: "fade", trigger: "mouseover", delayTime: 300});
	$("#switchBox5").switchTab({defaultIndex: "1", titOnClassName: "active", titCell: "dt em", mainCell: "dd ul", effect: "slide"});
	$(".slideBox").switchTab({trigger: "mouseover", delayTime: 0});
	$("#switchBox7").switchTab({defaultIndex: "1", titCell: "dt span", mainCell: "dd", interTime: 5000});
});
</script>
<div class="demo">
	<h2>此款jquery选项卡插件基于jquery.1.2或1.3以上版本都能使用。</h2>
	<h3>1,默认设置</h3>
	<dl class="switchBox" id="switchBox">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
			<span>div+css教程</span>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画滑动选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">css3样式表制作简单10种颜色线性渐变web buttons按钮</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">用css3滑动图像面板图片切换特效多种css3图片切换演示</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code> $(&quot;#switchBox&quot;).switchTab();</code>
	</blockquote>
	<h3>2,使用fade切换效果</h3>
	<dl class="switchBox" id="switchBox2">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code>$(&quot;#switchBox2&quot;).switchTab({effect: &quot;fade&quot;});</code>
	</blockquote>
	<h3>3,使用不同的标题容器(标题带链接),悬停切换</h3>
	<dl class="switchBox" id="switchBox3">
		<dt>
			<a href="http://www.17sucai.com/">jquery 特效</a>
			<a href="http://www.17sucai.com/">javascript特效</a>
			<a href="http://www.17sucai.com/">flash特效</a>
			<a href="http://www.17sucai.com/">div+css教程</a>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画滑动选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">css3样式表制作简单10种颜色线性渐变web buttons按钮</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">用css3滑动图像面板图片切换特效多种css3图片切换演示</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code>$(&quot;#switchBox3&quot;).switchTab({titCell: &quot;dt a&quot;, trigger: &quot;mouseover&quot;, delayTime: 0});</code>
	</blockquote>
	<h3>4,悬停300毫秒后切换,使用fade效果</h3>
	<dl class="switchBox" id="switchBox4">
		<dt>
			<a href="http://www.17sucai.com/">jquery 特效</a>
			<a href="http://www.17sucai.com/">javascript特效</a>
			<a href="http://www.17sucai.com/">flash特效</a>
			<a href="http://www.17sucai.com/">div+css教程</a>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画滑动选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">css3样式表制作简单10种颜色线性渐变web buttons按钮</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">用css3滑动图像面板图片切换特效多种css3图片切换演示</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code>$(&quot;#switchBox4&quot;).switchTab({titCell: &quot;dt a&quot;, effect: &quot;fade&quot;, trigger: &quot;mouseover&quot;, delayTime: 300});</code>
	</blockquote>
	<h3>5,内容容器也换换,使用指定的高亮样式active,默认第二个选中,使用slide效果</h3>
	<dl class="switchBox" id="switchBox5">
		<dt>
			<em>jquery 特效</em>
			<em>javascript特效</em>
			<em>flash特效</em>
			<em>div+css教程</em>
			<em class="fat">多加一个框框</em>
			<em>再来一个</em>
		</dt>
		<dd>
			<ul>
				<li>列表一</li>
				<li>山顶洞羊作品 jQuery 滑动切换插件横空出世</li>
				<li>山顶洞,jQuery,插件</li>
				<li>黑夜给了我黑色的眼睛,我用它去寻找光明</li>
				<li>羊大仙向网友推送的 jQuery 插件获得一致好评</li>
			</ul>
			<ul>
				<li>时尚推荐</li>
				<li>山顶洞羊作品 jQuery 滑动切换插件横空出世</li>
				<li>山顶洞,jQuery,插件</li>
				<li>黑夜给了我黑色的眼睛,我用它去寻找光明</li>
				<li>羊大仙向网友推送的 jQuery 插件获得一致好评</li>
			</ul>
			<ul>
				<li>技术观点</li>
				<li>山顶洞羊作品 jQuery 滑动切换插件横空出世</li>
				<li>山顶洞,jQuery,插件</li>
				<li>黑夜给了我黑色的眼睛,我用它去寻找光明</li>
				<li>羊大仙向网友推送的 jQuery 插件获得一致好评</li>
			</ul>
			<ul>
				<li>业界报道</li>
				<li>山顶洞羊作品 jQuery 滑动切换插件横空出世</li>
				<li>山顶洞,jQuery,插件</li>
				<li>黑夜给了我黑色的眼睛,我用它去寻找光明</li>
				<li>羊大仙向网友推送的 jQuery 插件获得一致好评</li>
			</ul>
			<ul>
				<li>标题有特别样式的 列表五</li>
			</ul>
			<ul>
				<li>多加几个试试</li>
				<li>山顶洞羊作品 jQuery 滑动切换插件横空出世</li>
				<li>山顶洞,jQuery,插件</li>
				<li>黑夜给了我黑色的眼睛,我用它去寻找光明</li>
				<li>羊大仙向网友推送的 jQuery 插件获得一致好评</li>
			</ul>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code>$(&quot;#switchBox5&quot;).switchTab({defaultIndex: &quot;1&quot;, titOnClassName: &quot;active&quot;, titCell: &quot;dt em&quot;, mainCell: &quot;dd ul&quot;, effect: &quot;slide&quot;});</code>
	</blockquote>
	<h3>6,使用类选择器来一次激活多个滑动门(慎用)</h3>
	<dl class="slideBox">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
			<span>div+css教程</span>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画滑动选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">css3样式表制作简单10种颜色线性渐变web buttons按钮</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">用css3滑动图像面板图片切换特效多种css3图片切换演示</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a>
		</dd>
	</dl>
	<dl class="slideBox">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
			<span>div+css教程</span>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画滑动选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">css3样式表制作简单10种颜色线性渐变web buttons按钮</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">用css3滑动图像面板图片切换特效多种css3图片切换演示</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a>
		</dd>
	</dl>
	<dl class="slideBox">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
			<span>div+css教程</span>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画滑动选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">css3样式表制作简单10种颜色线性渐变web buttons按钮</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">用css3滑动图像面板图片切换特效多种css3图片切换演示</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code> $(&quot;.slideBox&quot;).switchTab({trigger: &quot;mouseover&quot;, delayTime: 0});</code>
	</blockquote>
	<h3>7,每隔5000毫秒自动切换</h3>
	<dl class="switchBox" id="switchBox7">
		<dt>
			<span>jquery 特效</span>
			<span>javascript特效</span>
			<span>flash特效</span>
		</dt>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡切换插件特效制作多个slider动画</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡插件 轻量级tab选项卡插件</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery 图片延迟加载插件制作tab选项卡图片异步加载</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">js选项卡类似js导航菜单的js tab选项卡切换效果</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a>
		</dd>
		<dd>
			· <a href="http://www.17sucai.com/" target="_blank">flash特效制作flash图片滚动带按钮控制左右图片滚动</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图切换特效制作各大网站的焦点图片轮播</a><br />
			· <a href="http://www.17sucai.com/" target="_blank">flash焦点图片切换3D flash动画图片效果带左右按钮控制</a>
		</dd>
	</dl>
	<blockquote>
		<h5>调用代码</h5>
		<code>$(&quot;#switchBox7&quot;).switchTab({defaultIndex: &quot;1&quot;, titCell: &quot;dt span&quot;, mainCell: &quot;dd&quot;, interTime: 5000});</code>
	</blockquote>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动选项卡 滑动切换 文字切换 文字选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到