<!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. 1116Xlinux初学习之正则表达式和通配符

    一.正则表达式: 元字符是用来阐释字符表达式意义的字符,简言之,就是用来描述字符的字符. 正则表达式RE(Regular Expression)是由一串字符和元字符构成的字符串. 正则表达式的主要功能 ...

  2. dblink连接的目标端 session不断的问题。

    来源于:http://blog.itpub.net/22782896/viewspace-676842/ 1.在使用了dblink的存储过程中,可以显示的手动关闭dblink连接,具体写法如下(测试存 ...

  3. 【BZOJ 1911】【APIO 2010】特别行动队

    http://www.lydsy.com/JudgeOnline/problem.php?id=1911 夏令营里斜率优化的例题,我调了一晚上,真是弱啊. 先推公式吧($sum_i$表示$x_1 \d ...

  4. 【转】c# 调用windows API（user32.dll）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  5. 内存溢出OOM与内存泄漏ML

    附, 微信团队原创分享:Android内存泄漏监控和优化技巧总结 一.如何避免OOM 异常 想要避免OOM 异常首先我们要知道什么情况下会导致OOM 异常. 1.图片过大导致OOM Android 中 ...

  6. java的执行与加载的过程

    第一.我们编写一个.java源文件: 第二.通过编译器javac.exe把.java源文件编译为.class字节码文件并装入类装载器里: 第三.java虚拟机java.exe把字节码文件解释为各个平台 ...

  7. 【POJ 3321】Apple Tree

    有n个节点以1为根节点的树,给你树的边关系u-v,一开始每个节点都有一个苹果,接下来有两种操作,C x改变节点x的苹果状态,Q x查询x为根的树的所有苹果个数.   求出树的dfs序,st[i]保存i ...

  8. pch文件的使用

    pch文件的应用场景:1.用来定义一些全局的宏2.用来导入一些全局都能访问的头文件(如果只需要让.m或者.mm文件访问到,不需要让.c文件访问到,那么需要把头文件写到#ifdef _OBJC_ #en ...

  9. UOJ262 【NOIP2016】换教室

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  10. 关于captive portal

    portal是入口的意思,我的理解,在这里其实就是门户或者主页.captive portal,就是强制主页.校园网里面的验证通常都是通过一个网页验证来完成,不管你点要访问哪一个网站,它都会强制给你转到 ...