jquery 显示隐藏详解与实例代码

html :

<p>hello</p><p style="display: none">hello again</p>

jquery :

$("p").toggle()

//$("p").show()
//$("p").hide()
:

<p tyle="display: none">hello</p><p style="display: block">hello again</p>

<script language="网页特效">
$("a[title='nav']").click(function(){
           for(i=0;i<$("a[title='nav']").size();i++)
            {
                if($(this).attr("id")!=$("a[title='nav']").eq(i).attr("id"))
                   $("a[title='nav']").eq(i).removeclass("hover");
                else
                    $("a[title='nav']").eq(i).addclass("hover");
            }
    });
</script>
<a href="#" id="nav1" title="nav" class="hover" onfocus="this.blur();">nav1</a>
<a href="#" id="nav2" title="nav" onfocus="this.blur();">nav2</a>
<a href="#" id="nav3" title="nav" onfocus="this.blur();">nav3</a>
<a href="#" id="nav4" title="nav" onfocus="this.blur();">nav4</a>

<h2 class="thand"><span></span><a href="#">open</a></h2>
    <div class="infobox">
        <dl>
            <dt><img src="../images/index_bg1.gif" name="logo"  id="logo" width="300"/></dt>
            <dd>

            </dd>
       </dl>
   </div> 
  

<script language="javascript">
 $(".thand").click(function(){           
 $(this).next().css教程("display",$(this).next().css("display")=="block" ? "none":"block");
    });
</script>

 

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(".adlink").hover(function(){
  $(".my_link").click();                        
  var div = $(".adlink").offset();
  var mytop = div.top + $(".adlink").height()-2;
  $(".my_link").css({top:mytop,left:div.left+5});
  $(".my_link").fadein("slow");
    },function(){});
   
 $(".adlink").mouseo教程ut(function(){
        if(document.activeelement==$(".my_link")) {
   $(".my_link").css({display:"block"});
        }else{
             $(".my_link").css({display:"none"});
        }  
    });   
   
    $(".my_link").hover(function(){
  $(".my_link").css({display:"block"});
 },function(){
  $(".my_link").fadeout("slow");
 }); 
});
</script>
</head>
<body>
<div class="adlink" id="adlink" style="background-color:#333333">1111111</div>
       <div class="my_link" style="background-color:#999999; width:200px; position:absolute;">
            <ul>
                <li></li>
                <li></li>
            </ul>
       </div>
</body>
</html>

时间: 2024-10-30 23:04:50

jquery 显示隐藏详解与实例代码的相关文章

jQuery grep()方法详解及实例代码_jquery

什么是jQuery.grep()? jQuery.grep()是一个查找满足过滤函数的数组元素的函数.原始数组不受影响,返回值为数组. 用法介绍: 写法: jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] ) 参数介绍: array 类型: Array 用于查询元素的数组. function(elementOfArray, indexInArray) 类型: Function() 该函数来处理每项元素的比

jQuery 特性操作详解及实例代码_jquery

前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttribute()方法.setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题.本文将介绍jQuery中的特性操作 获取特性 jQuery中用attr()方法来获取和设置特性,attr是attribute(特性)的缩写,在jQuery DOM操作中会经常

Android Dialog详解及实例代码

Android Dialog详解及实例代码 概述: Android开发中最常用的就是Dialog类,除了自定义dialog布局,最多的就是用在弹出对话框.进度条.输入框.单选.复选框. 1.选择对话框: AlertDialog.Builder dialog = new AlertDialog.Builder(this); dialog.setTitle("选择对话框"); dialog.setMessage("请选择确认或取消"); dialog.setCancel

php mysql insert into 结合详解及实例代码_Mysql

php mysql insert into 结合详解 ySQL INSERT INTO语句在实际应用中是经常使用到的语句,所以对其相关的内容还是多多掌握为好. 向数据库表插入数据 INSERT INTO 语句用于向数据库表添加新记录. 语法 INSERT INTO table_name VALUES (value1, value2,....) 您还可以规定希望在其中插入数据的列: INSERT INTO table_name (column1, column2,...) VALUES (valu

MySQL MEM_ROOT详解及实例代码_Mysql

MySQL MEM_ROOT详解 这篇文章会详细解说MySQL中使用非常广泛的MEM_ROOT的结构体,同时省去debug部分的信息,仅分析正常情况下,mysql中使用MEM_ROOT来做内存分配的部分. 在具体分析之前我们先例举在该结构体使用过程中用到的一些宏: #define MALLOC_OVERHEAD 8 //分配过程中,需要保留一部分额外的空间 #define ALLOC_MAX_BLOCK_TO_DROP 4096 //后续会继续分析该宏的用途 #define ALLOC_MAX_

Android ViewPagerIndicator详解及实例代码

Android ViewPagerIndicator详解及实例代码 关于自定义View的属性零碎知识 自定义View和自定义属性的知识不再此提及,这里着重说的是属性在自定义View中的获取方式,自定义的属性如下: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Wisely"> <attr name=&

ReactNative Alert详解及实例代码_Android

Alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等...ReactNative中的Alert只有一个静态方法alert()其中有四个参数:标题,信息,按钮和按钮类型 在Android按钮至多有三个 下面是使用情况: 实例代码: /** * Created by Administrator on 2016/9/12. */ import React, {Component} from 'react'; import { StyleSheet, View, T

C++函数重载详解及实例代码_C 语言

C++函数的重载 定义 在同一个作用域中,函数名相同,函数的参数列表不同的函数之间构成重载关系,在不同作用域中的同名函数遵循标识符隐藏的原则 ATTENTION:重载与函数的返回值类型无关,因为声明一个函数不需要返回类型,所以无法用来区分哪个函数 常函数和普通成员函数之间构成重载,重载时常对象调用常成员函数,一般对象调用一般成员函数 class A{ - public: void getVal()const{-} void getVal(){-} }; int main(){ const A a

C++ 继承详解及实例代码_C 语言

C++继承可以是单一继承或多重继承,每一个继承连接可以是public,protected,private也可以是virtual或non-virtual.然后是各个成员函数选项可以是virtual或non-virtual或pure virtual.本文仅仅作出一些关键点的验证. public继承,例如下: 1 class base 2 {...} 3 class derived:public base 4 {...} 如果这样写,编译器会理解成类型为derived的对象同时也是类型为base的对象