jquery 选项卡效果
jquery 选项卡效果
这里提供了一款利用jquery 选项卡插件来做一款精美jquery 选项卡效果实例哦,下面是我们提供的源码,同时也提供在线预览与源码下载。
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>using css教程 sprites</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery-1.2.6.min.js" type="text/网页特效" charset="utf-8"></script>
<script src="js/widget.js" type="text/javascript" charset="utf-8"></script>
</head><body>
<div id="page-wrap">
<div class="box"><ul id="catnav">
<li class="activecatbutton"><a id="list-one-button">apple</a></li>
<li><a id="list-two-button">linux</a></li>
<li><a id="list-three-button">microsoft</a></li>
<li><a id="list-four-button">news</a></li>
</ul>
<ul class="cat-list" id="list-one">
<li><a href="#">example story from list one</a></li>
<li><a href="#">example story from list one</a></li>
<li><a href="#">example story from list one</a></li>
<li><a href="#">example story from list one</a></li>
<li><a href="#">example story from list one</a></li>
</ul><ul class="cat-list" id="list-two">
<li><a href="#">example story from list two</a></li>
<li><a href="#">example story from list two</a></li>
<li><a href="#">example story from list two</a></li>
<li><a href="#">example story from list two</a></li>
<li><a href="#">example story from list two</a></li>
</ul><ul class="cat-list" id="list-three">
<li><a href="#">example story from list three</a></li>
<li><a href="#">example story from list three</a></li>
<li><a href="#">example story from list three</a></li>
<li><a href="#">example story from list three</a></li>
<li><a href="#">example story from list three</a></li>
</ul><ul class="cat-list" id="list-four">
<li><a href="#">example story from list four</a></li>
<li><a href="#">example story from list four</a></li>
<li><a href="#">example story from list four</a></li>
<li><a href="#">example story from list four</a></li>
<li><a href="#">example story from list four</a></li>
</ul>
</div>
</div></body>
</html>
在线预览地址
http://g.226511.cn/javascript/js/20100831/tab
源码下载地址
http://down.zzzyk.com/down/code/jquery/2010/0831/20544.html
补充:网页制作,jquery