zoukankan      html  css  js  c++  java
  • jquery中简易tab切换

    <!doctype html>
    <html>
    <head>
    <title>test</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    <body>
    <div class="tabs">
        <ul id="tabs">
            <li class="tab-nav">管理导航</li>
            <li class="tab-nav-action">系统设置</li>
            <li class="tab-nav">用户管理</li>
            <li class="tab-nav">内容管理</li>
            <li class="tab-nav">其他管理</li>
        </ul>
    </div>
    <div id="tabs-body" class="tabs-body">
        <div style="display:block">
        1111111
        </div>
        <div style="display:none">
        222222222
        </div>
        <div style="display:none">
        33333333333
        </div>
        <div style="display:none">
        4444444444
        </div>
        <div style="display:none">
        555555555555555
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function (){
        $('#tabs li').hover(function(){
        	var index = $(this).index();
            var divs = $('#tabs-body').find('div');
            $('#tabs li').removeClass('active');
            $(this).addClass('active');
            divs.hide();//隐藏所有选中项内容
            divs.eq(index).show(); //显示选中项对应内容
        });
    });
    </script>
    另外一种:
    <script type="text/javascript">
    $(document).ready(function (){
        $('#tabs').find('li').click(function(){ //使用find()获取元素效率更高
        	var index = $(this).index();
        	$('#tabs').find('li').removeClass('active');
        	$(this).addClass('active');
        	$("#tabs-body").find("div").eq(index).show().siblings().hide();
        });
    });
    </script>
    </body> </html>

      看到一种更简便且可以大范围使用的http://www.cnblogs.com/Denny_Yang/archive/2010/10/24/1859666.html

    222222222
    33333333333
    4444444444
    555555555555555
  • 相关阅读:
    Lambda Expression in C#
    DirectorySearcher LDAP
    摘录 LDAP
    The return types for the following stored procedures could not be detected
    无法调试存储过程,无法启动T-SQL调试
    根据窗口句柄显示窗体
    还原数据库时提示空间不足
    xml格式发送
    ../ 上一级目录
    匿名函数 invoke
  • 原文地址:https://www.cnblogs.com/anns/p/3484285.html
Copyright © 2011-2022 走看看