<!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>

利用jquery实现网站中对应栏目下面内容切换效果。的更多相关文章

  1. 如何利用 jQuery 修改 css 中带有 !important 的样式属性？

    使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...

  2. 取得phpcms网站下所有栏目的内容链接

    今天做了一个小功能,就是取得公司网站的所有文章的内容地址,公司网站是用phpcms 做的,感觉还蛮简单的,记录下: <?php $conf['DB_USER'] = 'user'; $conf[ ...

  3. 利用jquery获取html中被选中的input的值

    单个按钮 <div id="wrap"> <input type="radio" name="payMethod" val ...

  4. 利用jquery将页面中所有目标为“#‘的链接改为其他URL

    有一张页面草稿,开始时为了方便,里面差不多所有的<a>都指向了"#".现在要修改为另一个地址,难道要全部修改吗?用jquery 改改就好.代码如下: <scrip ...

  5. 在自己网站中引入CU3ER/Flash 3D幻灯片效果和照片画框

    要求 必备知识 本文要求基本了解 JAVASCRIPT 和 XML基础语法知识. 运行环境 支持Flash Player的浏览器/Flash Player11及以上 演示地址 演示地址 下载地址   ...

  6. 利用正则取出Stirng中“”引号内的内容

    // 取出所有""中间的内容,正则如下 Pattern pattern1 = Pattern.compile("(?<=\")([\\S]+?)(?=\& ...

  7. jquery 根据网站url给导航nav添加active效果

    后台的同事因为把nav公用了,所以无法单页添加active,一下方法通过判断url的后缀给当前页添加active $(function(){ var _nava= $('.nav .nav-wrapp ...

  8. 用jQuery向div中添加Html文本内容

    前台代码: <link href="http://www.cnblogs.com/Content/themes/base/jquery-ui.css" rel="s ...

  9. 随笔记录①—利用poi读取Word中的标题和内容

    使用时间:4小时 使用poi方法将word中的内容提取出来,并输出到控制台或者存储到数据库poi.jar下载地址:https://www.apache.org/dyn/closer.lua/poi/r ...

随机推荐

  1. iOS-- 重要的链接

    面试题: http://www.jianshu.com/p/6a57c6e902e8 富文本: http://www.cnblogs.com/jys509/p/5018027.html

  2. 屠龙之路_战胜狮身人面怪物_SecondDay

    第二天,少年们跋山涉水来到了恶龙山的山脚.前面有一座迷宫,守卫迷宫的是一只狮身人面的怪物,它出一个谜语让少年们猜,如果屠龙团猜不出答案就会被吃掉(如果你能猜出来,我就让你--),它问:"软件 ...

  3. 获取客户端ip地址

    新浪的IP地址查询接口:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js 新浪多地域测试方法:http://int.dpool. ...

  4. [转]Hibernate update和saveOrUpdate详解

    原文地址:http://www.iteye.com/topic/2712 先来点概念: 在Hibernate中,最核心的概念就是对PO的状态管理.一个PO有三种状态: 1.未被持久化的VO 此时就是一 ...

  5. EditText 几种显示方式，固定行数，自适应行数

    1.显示7行,超过7行自动向下补充行数 <EditText android:id="@+id/edt_content" android:layout_width=" ...

  6. ActiveMQ(八)_多集群的负载均衡

                                                                           图一     图一说明:    1.集群一包含3个队列:A ...

  7. 【BZOJ 3809】Gty的二逼妹子序列

    这个莫队如果用线段树来维护的话,复杂度是$O(n\sqrt{n}logn+qlogn)$ 很明显,可以看出来莫队每次$O(1)$的移动因为套上了线段树变成了$O(logn)$,但莫队移动的总数是非常大 ...

  8. mysql之旅【第二篇】

    创建,修改和删除表 1,创建表: create table 表名(属性名   数据类型   [完整性约束条件], 属性名   数据类型   [完整性约束条件], 属性名   数据类型   [完整性约束 ...

  9. linux下截取整个网页

    前提需要安装 gimp图片处理软件 打开gimp 文件-创建-从网页  然后输入网页地址就可以截取整个网页了

  10. spring-ant-处理zip

    因为java类型自带的不支持中文路径,不过两者使用的方式是一样的,只是apache压缩工具多了设置编码方式的接口,其他基本上是一样的.另外,如果使用org.apache.tools.zip.ZipOu ...