垂片切换内容 - 动态内容 - 软晨网（RuanChen.com）

当前位置: 首页 > 实例教程 > 脚本特效 > 动态内容 > 垂片切换内容

动态内容: 文字/图片自动播放脚本; 顶置浮动内容条; 内容前后翻页; 内容折叠效果; 可滚动内容; 固定中间渐变提示效果; 垂片切换内容; 垂片图片内容切换; 模拟分页效果; 自动隐藏的广告框效果

实例搜索

关键字

动态内容中的垂片切换内容

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-07-27 浏览: 280 ::

收藏到网摘: n/a

固定中间渐变提示效果垂片图片内容切换

垂片切换内容 - 软晨网（RuanChen.com）

效果演示：

Tab content 1 here
Tab content 1 here

Tab content 2 here
Tab content 2 here

Tab content 3 here
Tab content 3 here

Tab content 4 here
Tab content 4 here

第一步：在HEAD区域加上导入CSS和JS的代码



<link rel="stylesheet" type="text/css" href="/example/files/b/tabcontent.css" />
<script type="text/javascript" src="/example/files/b/tabcontent.js"></script>

第二步：下载必要的文件

/example/files/b/tabcontent.css /example/files/b/tabcontent.js /example/files/b/shade.gif /example/files/b/shadeactive.gif

第三步：放好以下代码就可以在页面上显示效果了



<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www."></a></li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</form>
</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>