<!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. mybatis Generator配置文件详解

    这里按照配置的顺序对配置逐个讲解,更细的内容可以配合中文文档参照. 1. 配置文件头 <?xml version="1.0" encoding="UTF-8&quo ...

  2. Linux vsftp配置本地用户

    主要讲的是配置本地用户, ftp现在用的也少了,一般都用ssh和svn 1. 安装ftp  yum -y install vsftpd 2. 配置 /etc/vsftpd/vsftpd.conf # ...

  3. MySQL数据库my.cnf性能参数如何调优

    提供一个MySQL 5.6版本适合在1GB内存VPS上的my.cnf配置文件.配置文件可以到这里下载:: 下载my.cnf [client] port = 3306 socket = /tmp/mys ...

  4. [转]扩展RBAC用户角色权限设计方案

    原文地址:http://www.iteye.com/topic/930648 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地 ...

  5. HttpHelper类

    using System;using System.Collections.Generic;using System.Text;using System.Net;using System.IO;usi ...

  6. Swift 高阶函数

    map.flatMap.filter和reduce,几乎实现lambda表达式的语言里都会在集合里增加这些方法, 见swift 学习(一)基础知识 (基本数据类型,操作符,流控制,集合)中的集合 ht ...

  7. poj3177 && poj3352 边双连通分量缩点

    Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12676   Accepted: 5368 ...

  8. java-汉字转换拼音-pinyin4j.jar

    使用pinyin4j将汉字转成拼音,附件为pinyin4j的jar包 import net.sourceforge.pinyin4j.PinyinHelper; import net.sourcefo ...

  9. java内存管理机制

    JAVA 内存管理总结 1. java是如何管理内存的 Java的内存管理就是对象的分配和释放问题.(两部分) 分配 :内存的分配是由程序完成的,程序员需要通过关键字new 为每个对象申请内存空间 ( ...

  10. Python 中文编码问题小结

    1. 下面的语句要放在代码开头,指定文件编码, 可以识别 脚本中的所有字符和中文. # -*- coding:utf-8 -*- 2. codecd 编码转换 如果想要读取文本中的中文,需要借助于co ...