当前位置:编程学习 > JS >>

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 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,