基於jquery 的 Tab

最新推荐文章于 2016-01-04 14:31:30 发布

tulasgao

最新推荐文章于 2016-01-04 14:31:30 发布

阅读量663

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/tulasgao/article/details/49278435

版权

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet"href="css/font-awesome.css">
    <scriptsrc="../js/jquery-1.10.1.min.js"></script>

           .tabs ul {
               list-style: none;
               height: 34px;
               margin: 0;
               padding: 0 0 0 15px;
            }

               .tabs ul li {
                   display: block;
                   float: left;
                   border: 1px solid #d3d3d3;
                   height: 32px;
                   border-top-left-radius: 3px;
                   border-top-right-radius: 3px;
                   padding: 0 15px;
                   line-height: 32px;
                   font-size: 12px;
                   position: relative;
                   color: #808080;
                   background: #efefef;
                   bottom: -1px;
                   margin-left: -1px;
               }

                   .tabs ul li.tab-nav:hover {
                       color: #464646;
                       background: #eaeaea;
                   }

       .tab-nav {
            cursor:pointer;
        }

       .tabs ul li.tab-nav-action {
           border-bottom: 1px solid #efefef;
        }

           .tabs ul li.tab-nav-action .tab-text {
               color: #2d5dcb;
               font-weight: bold;
            }

           .tabs ul li.tab-nav-action i {
               color: white;
               background: #2d5dcb;
            }

       .tabs-body {
            background:#efefef;
           border-bottom: 1px solid #B4C9C6;
            border-left:1px solid #B4C9C6;
           border-right: 1px solid #B4C9C6;
            float: left;
            width: 100%;
            height:400px;
        }

       .tab-data {
            border: 1pxsolid #d3d3d3;
            margin: 0px20px 5px 20px;
            background:white;
            font-size:12px;
        }

           .tab-data .formtable {
               border-collapse: collapse;
            }

               .tab-data .formtable th {
                   font-weight: normal;
                   padding: 3px 20px;
                   line-height: 24px;
                   width: 100px;
                   background: #fafafa;
                   border-bottom: 1px solid #efefef;
               }

               .tab-data .formtable td {
                   padding: 3px 10px;
                   border-bottom: 1px solid #efefef;
                   line-height: 24px;
               }

       .tabs li .tab-icon {
            margin-top:7px;
            *display:none;
        }

       .tabs .tab-nav li:hover .tab-icon i {
            background:#9f9f9f;
        }

       .tabs li .tab-icon i {
            color: #FFF;
            display:inline-block;
            width: 18px;
            height:18px;
            line-height:18px;
            background:#bbbbbb;
            text-align:center;
           margin-right: 5px;
            font-size:12px;
        }
    </style>
    <script type="text/javascript">

       $(document).ready(function () {
           $(".tabs li").bind("click", function () {
               var index = $(this).index();
               var divs = $(".tabs-body > div.tab-data");
               $(this).parent().children("li").removeClass("tab-nav-action").addClass("tab-nav");//将所有选项置为未选中
               $(this).addClass("tab-nav-action").removeClass("tab-nav");//设置当前选中项为选中样式
               divs.hide();//隐藏所有选中项内容
               divs.eq(index).show(); //显示选中项对应内容
            });
        });

</script>
</head>
<body>

    <divclass="tabs">
        <ul>
            <liclass="tab-nav-action"><spanclass="tab-icon"><i class="fafa-file-text-o"></i></span><spanclass="tab-text">管理导航</span></li>
            <liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-image-o"></i></span><spanclass="tab-text">系统设置</span></li>
            <liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-video-o"></i></span><spanclass="tab-text">用户管理</span></li>
            <liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-files-o"></i></span><spanclass="tab-text">内容管理</span></li>
            <liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-o"></i></span><spanclass="tab-text">其他管理</span></li>
             <li class="tab-nav"><spanclass="tab-icon"><i class="fafa-volume-up"></i></span><span class="tab-text">内容管理</span></li>
            <liclass="tab-nav"><span class="tab-icon"><iclass="fa fa-file-excel-o"></i></span><spanclass="tab-text">其他管理</span></li>
        </ul>
    </div>
    <div class="tabs-body">
        <div style="margin: 20px 0px8px 20px; font-size: 12px;">
            相关信息：
        </div>
        <divclass="tab-data">
            <tablewidth="100%" border="0" class="formtable">
               <tr>
                   <th>被登记人</th>
                   <td>
                       <input name="" type="text" />
                   </td>
               </tr>
               <tr>
                   <th>所属部门</th>
                   <td>
                       <select name="">
                           <option>举报</option>
                       </select></td>
               </tr>
               <tr>
                   <th>事实来源</th>
                   <td>
                       <select name="">
                           <option>请选择</option>
                       </select></td>
               </tr>
               <tr>
                   <th>行为概述</th>
                   <td>
                       <input name="" type="text" />
                   </td>
               </tr>
               <tr>
                   <th>登记内容</th>
                   <td>
                       <textarea name="" cols="" rows=""style="width: 600px; height: 60px"></textarea></td>
               </tr>
           </table>
            <divstyle="text-align: center; margin: 10px auto;">
               <input name="" type="button" value="保存" class="savebtn" />
               <input name="" type="button" value="取消" class="cancelbtn" />
            </div>

</div>

       <div class="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>
        <div class="tab-data"style="display: none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>
         <divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>
         <divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist" style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>
         <divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>
         <divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>
         <divclass="tab-data" style="display:none;font-size:25px;background:#2c78ce;color:white;padding:10px;">
             <i class="fa fa-angellist"style="color:#4caf50;font-size:35px;"></i> 功能开发中......
        </div>