<!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. 【原创】解决jquery在ie中不能解析字符串类型xml结构的xml字符串的问题

    $.fn.extend({ //此方法解决了ie中jquery不识别非xml的类型的xml字符串的问题 tony tan findX: function (name) { if (this & ...

  2. Android 强制竖屏

    一般android 显示内容都有两种实现方式,java代码中实现,xml布局中实现(或者权限管理页面) 直接上代码: java方法 setRequestedOrientation(ActivityIn ...

  3. 如何在移动端app中应用字体图标icon fonts （转）

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  4. 小 div在大 div中左右上下居中

    <!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content=& ...

  5. WebApi服务Uri加密及验证的两种方式

    最近的一个项目要求服务端与UI层分离,业务层以WebApi方式向外提供所有业务服务,服务在数据保密性方面提出了要求,主要包括: 1:客户端认证: 2:服务请求超时(默认5分钟): 3:服务Get请求的 ...

  6. 数据库开发基础-SQl Server 存储过程

    存储过程: 存储过程(stored procedure)有时也称为sproc.存储过程存储于数据库中而不是在单独的文件中,有输入参数.输出参数以及返回值等. 在数据库中,创建存储过程和创建其他对象的过 ...

  7. SPDY 是什么？如何部署 SPDY？

    摘要:当老迈的 HTTP 协议逐渐不能满足人们需求的时候,Google 的 SPDY 协议出现在面前,那么这个长期以来一直被认为是 HTTP 2.0 唯一可行选择的 SPDY 是什么呢?当下我们如何能 ...

  8. phpwind9.0模板制作教程——制作论坛风格

    由于论坛模板机制和门户等模板机制不同,所以今天我就先重点讲讲论坛模板制作的大概过程. 一.先来熟悉下phpwind9.0的论坛模板机制. 其实phpwind9.0的模板机制和discuzx2.5差不多 ...

  9. c# 监听文件夹动作

    static FileSystemWatcher watcher = new FileSystemWatcher(); /// <summary>        /// 初始化监听     ...

  10. Metro-UI系统-2-color和icon

    1.上图 Color icon 2. 怎么用 2.1 color使用 <!--1,设置背景和前景色--> <div class="tile bg-blue fg-white ...