文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

jquery tab 选项卡功能

发布于 2025-02-25 12:38:57 字数 4670 浏览 0 评论 0 收藏 0

jquery 选项卡，带 css 样式的。支持 ajax 更新内容、页面同时出现多个 tab 选项卡而不影响其他选项卡内容。  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
  <title>jquery tab 选项卡</title>  

  <meta http-equiv="author" content="hoojo">  
  <meta http-equiv="description" content="this is my page">  
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type="text/javascript" src="jquery.js"></script>  
  <style type="text/css">  
    .tab {  
      background-color: mintcream;  
      width: 200px;  
      -width: 205px;  
      height: 200px;  
      margin-left: 200px;   
    }  

    .header {  
      height: 20px;  
      width: 100%;  
    }  

    .content {  
      border: 1px solid #CCCCFF;  
      border-top: none;  
      height: 180px;  
    }  

    .liStyle {  
      cursor: pointer;  
      height: 20px;  
      width: 66px;  
      -width: 61px;  
      float: left;        
      background-color: white;  
    }  

    .show {  
      background-color: mintcream;  
      border: 1px solid #CCCCFF;  
      border-bottom: none;  
    }  

    .hide {  
      background-color: white;  
      border-bottom: 1px solid #CCCCFF;  
    }  

    .ulHide {  
      display: none;  
    }  

    .ulShow {  
      display: block;  
    }  

    ul {  
      list-style: none outside none;  
    }  

    * {  
      margin: 0;  
      padding: 0;  
    }  
  </style>  

  <script type="text/javascript">  
    $(function () {       
      $(".tab > ul.header > li").click(function () {  
        $(this).parent().find("li.show").addClass("hide").removeClass("show");  
        $(this).addClass("show").removeClass("hide");  
        var parentsEl = $(this).parents(".tab");  
        parentsEl.find("div > ul.ulShow").addClass("ulHide").removeClass("ulShow");  
        /*页面静态内容*/  
        var ary = parentsEl.find("ul.header > li");  
        parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");    
        /*用 ajax 动态加载内容  
        parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {  
          var el = this;  
          $.post("TreeDataServlet", {param: "params"}, function (data) {  
            $(el).html(data);  
          });  
          return "ulShow";  
        }).removeClass("ulHide");*/     
      })  
    });  
  </script>  
  </head>  

  <body bgcolor="white">  
   <div class="tab">  
    <ul class="header">  
      <li class="liStyle show">Java</li>  
      <li class="liStyle hide">Spring</li>  
      <li class="liStyle hide">Hibernate</li>  
    </ul>  
    <div class="content">  
      <ul class="ulShow">  
        Java  
        <li>java javaSE</li>  
        <li>java javaME</li>  
        <li>java javaEE</li>  
      </ul>  
      <ul class="ulHide">  
        Spring  
        <li>java springMVC</li>  
        <li>java spring aop</li>  
        <li>java spring Ioc DI</li>  
      </ul>  
      <ul class="ulHide">  
        Hibernate  
        <li>java Hibernate Configuration Transaction</li>  
        <li>java Hibernate Query Criteria</li>  
        <li>java Hibernate Session SessionFactory</li>  
      </ul>  
    </div>  
  </div>  
  <hr/>  
  <div class="tab">  
    <ul class="header">  
      <li class="liStyle show">Java</li>  
      <li class="liStyle hide">Spring</li>  
      <li class="liStyle hide">Hibernate</li>  
    </ul>  
    <div class="content">  
      <ul class="ulShow">  
        Java....  
        <li>java javaSE</li>  
        <li>java javaME</li>  
        <li>java javaEE</li>  
      </ul>  
      <ul class="ulHide">  
        Spring....  
        <li>java springMVC</li>  
        <li>java spring aop</li>  
        <li>java spring Ioc DI</li>  
      </ul>  
      <ul class="ulHide">  
        Hibernate....  
        <li>java Hibernate Configuration Transaction</li>  
        <li>java Hibernate Query Criteria</li>  
        <li>java Hibernate Session SessionFactory</li>  
      </ul>  
    </div>  
  </div>  
  </body>  
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

jquery tab 选项卡功能

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。