zoukankan      html  css  js  c++  java
  • 利用jquery实现网站中对应栏目下面内容切换效果。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    
    <script src="js/jquery.js"></script>
    </head>
          <style type="text/css">
                .tabpad {display:none;}
                .show{display:block;}
                .tabbt-on a{color: red;}
                .ul-1  li a:hover{color: blue;}
          </style>
    <body>
    <div class="con4">    
            <div id="ghyw">
                <ul class="tabul">
                    <li class="tabbt-on">
                            <a href="#" tabindex="0" target="_blank">组织建设</a>
                    </li>
                    <li class="">
                            <a href="#" tabindex="1" class="btn-2" target="_blank">民主管理</a>
                    </li>
                </ul>
                <div class="tabpad" >
                    <ul class="ul-1">
                            <li>
                                <a>测试一下111</a>
                            </li>
                            <li>
                                <a>测试一下222</a>
                            </li>
                            <li>
                                <a>测试一下333</a>
                            </li>
                    </ul>
                </div>
                <div class="tabpad">
                         <ul class="ul-1">
                                
                                    <li>
                                        <a>测试一下444</a>
                                    </li>
                                    <li>
                                        <a>测试一下555</a>
                                    </li>
                                    <li>
                                        <a>测试一下666</a>
                                    </li>
                        </ul>
                </div>
          </div>
    </div>
    </body>
    </html>
    <script>
        $('#ghyw .tabul li').hover(function(){
            var index=$(this).index();
            $('#ghyw .tabul li').eq(index).addClass("tabbt-on").siblings().removeClass("tabbt-on");
            $('.tabpad ul-1 li').eq(index).addClass("tabbt-on").siblings().removeClass("tabbt-on");
            $('#ghyw .tabpad').eq(index).addClass("show").siblings().removeClass("show");
        });
    </script>
  • 相关阅读:
    测试脚本
    浅谈优化SQLServer数据库服务器内存配置的策略
    真正的取真实IP地址及利弊Asp.net
    ASP.NET一些常用正则表达式
    (CHMSoftware)工具集锦
    仿真方面的文章
    TPlan测试过程管理工具技术摘要
    Linux 2.6内核的精彩世界(多媒体)
    Ajax技术实践之完成Ajax自动完成功能
    硬件测试
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5534699.html
Copyright © 2011-2022 走看看