<!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. 【Spring】构建Springboot项目 实现restful风格接口

    项目代码如下: package hello; import org.springframework.boot.SpringApplication; import org.springframework ...

  2. 【jQuery EasyUI系列】 创建展开行明细编辑表单的CRUD应用

    当切换数据网络格局(datagrid view)到detailview,用户可以展开一行来显示一些行的明细在行下面,这个功能允许您为防止在明细行面板中的编辑表单提供一些合适的布局. 步骤1.在HTML ...

  3. 51-du 显示关于目录层次结构或文件磁盘使用情况的信息

    显示关于目录层次结构或文件磁盘使用情况的信息 du [options] [path-list] 参数 不带任何参数的du将显示工作目录及其子目录磁盘使用情况的信息,path-list指定要获取磁盘占用 ...

  4. android中的屏幕单位介绍

    1.px (pixels)(像素):是屏幕的物理像素点,与密度相关,密度大了,单位面积上的px 会比较多.通常不推荐使用这个. 2.dip 或dp(与密度无关的像素):一个基于density(密度)的 ...

  5. git 格式化输出版本信息

    git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)&l ...

  6. linux命令巧用，随手记

    巧用1 一句话修改或者给用户设置密码,并且防止历史命令记住设置的密码 echo "qqxde:ioj123"|passwd --stdin Dicky && his ...

  7. mysql查看数据库

    进入MySQL Command line client下查看当前使用的数据库: mysql>select database(); mysql>status; mysql>show t ...

  8. 转发；Dota英文名

    http://esports.17173.com/content/2011-02-17/20110217163225753.shtml 有的英雄的名字真的很漂亮,也给那些学校里英文各种悲剧的同鞋增加点 ...

  9. python学习笔记10（Python的内存管理）

      用这张图激励一下自己,身边也就只有一位全栈数据工程师!!! 32. Python的内存管理 1. 对象的内存使用 对于整型和短字符串对象,一般内存中只有一个存储,多次引用.其他的长字符串和其他对象 ...

  10. codevs1183泥泞的道路

    题意:给定一张有向稠密图和通过每条边的时间和路程,问从1到n的路程/时间 最大为多少 正解:SPFA+二分答案 开始做的时候,想直接跑图论,后来发现好像不对(不然数据范围怎么这么小) 但是显然要用到图 ...