<!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>

</head>

<style>

body,div,ul,li,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

ul{list-style-type:none;}

#outer{width:200px;border:1px solid #aaa;margin:10px auto;}

#outer h2{cursor:pointer;color:#57646E;font-size:14px;font-weight:400;border:1px solid;height:30px;line-height:30px;padding-left:10px;background:#ced3d7 url(img/ico.gif) 180px 15px no-repeat;border-color:#fff #e9edf2;}

#outer h2.open{background-position:180px -12px;}

#outer ul{border-top:1px solid #DEE3E6;}

#outer li{height:25px;line-height:25px;vertical-align:top;}

#outer a{display:block;color:#6b7980;background:#e9edf2;text-decoration:none;padding:0 10px;}

#outer a:hover{background:#fff;text-decoration:underline;}

</style>

<script>

window.onload = function ()

{

    var oH2 = document.getElementsByTagName("h2")[0];

    var oUl = document.getElementsByTagName("ul")[0];

    oH2.onclick = function ()

    {

        var style = oUl.style;

        style.display = style.display == "none" ? "block" : "none";

        oH2.className = style.display == "none" ? "open" : ""

    }

}

</script>

<body>

<div id="outer">

    <h2>播放列表...</h2>

    <ul>

        <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>

        <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>

        <li><a href="javascript:;">猜不透 - 丁当</a></li>

        <li><a href="javascript:;">自导自演 - 周杰伦</a></li>

        <li><a href="javascript:;">浪漫窝 - 弦子</a></li>

        <li><a href="javascript:;">流年 - 王菲</a></li>

    </ul>

</div>

</body>

</html>

提示框效果

<!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>

<style>

body,div,h2,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

ul{list-style-type:none;}

#outer{width:560px;border:1px solid #333;margin:10px auto;padding:0 0 10px 10px;}

#outer h2{line-height:30px;text-align:center;margin-top:10px;}

#outer ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

#outer ul{zoom:1;}

#outer ul li{position:relative;float:left;border:1px solid #333;margin:10px 10px 0 0;display:inline;}

#outer ul li img{position:absolute;top:-14px;left:-14px;display:none;border:2px solid #999;cursor:crosshair;}

#outer ul li a{color:#666;width:80px;height:80px;display:block;background:#f0f0f0;text-decoration:none;padding:10px;}

#outer ul li a strong{display:block;}

.zindex{z-index:1;}

</style>

<script>

window.onload = function ()

{

    var oLi = document.getElementsByTagName("li");

    var oA = document.getElementsByTagName("a");

    var oImg = document.getElementsByTagName("img");

    for (var i = 0; i < oLi.length; i++)

    {

        oA[i].index = oImg[i].index = i;

        oA[i].onmouseover = function() {

            oLi[this.index].className = "zindex";

            oImg[this.index].style.display = "block"

        };

        oA[i].onmouseout = function ()

        {

            oLi[this.index].className = "";

            oImg[this.index].style.display = "none"

        };

        oImg[i].onmouseover = function()

        {

            oLi[this.index].className = "zindex";

            this.style.display = "block"

        };

        oImg[i].onmouseout = function()

        {

            oLi[this.index].className = "";

            this.style.display = "none"

        }

    }

}

</script>

</head>

<body>

<div id="outer">

    <h2>名车车标展示-鼠标移过显示车标</h2>

    <ul>

        <li>

            <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>

            <img src="img/1.jpg" alt="BMW 宝马汽车" />

        </li>

        <li>

            <a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>

            <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />

        </li>

        <li>

            <a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>

            <img src="img/3.jpg" alt="Skoda 斯柯达" />

        </li>

        <li>

            <a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>

            <img src="img/4.jpg" alt="Volkswagen 大众汽车" />

        </li>

        <li>

            <a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>

            <img src="img/5.jpg" alt="Saab 萨布牌轿" />

        </li>

        <li>

            <a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>

            <img src="img/6.jpg" alt="Lamborghini 兰博基尼" />

        </li>

        <li>

            <a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>

            <img src="img/7.jpg" alt="Porsche 保时捷" />

        </li>

        <li>

            <a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>

            <img src="img/8.jpg" alt="Peugeot 标致" />

        </li>

        <li>

            <a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>

            <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />

        </li>

        <li>

            <a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>

            <img src="img/10.jpg" alt="Buick 别克汽车" />

        </li>

    </ul>

</div>

</body>

</html>

单一按钮显示/隐藏&&提示框效果的更多相关文章

  1. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  2. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  3. 通过自定义window来实现提示框效果

    #import <UIKit/UIKit.h>#import <Foundation/Foundation.h> @interface ZMStatuBarHud : NSOb ...

  4. 微信小程序API交互反馈,wx.showToast显示消息提示框

    导读:wx.showToast(OBJECT) 显示消息提示框. OBJECT参数说明: 参数 类型 必填 说明 最低版本 title String 是 提示的内容 icon String 否 图标, ...

  5. WPF提示框效果

    WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...

  6. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  7. PowerShell 显示气球提示框 1

    #加载 Winform 程序集,使用Out-Null抑制输出 [system.Reflection.Assembly]::LoadWithPartialName('System.Windows.For ...

  8. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  9. 基于JQuery 的消息提示框效果代码

    提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...

随机推荐

  1. Linux下kill命令

    首先了解什么是信号:信号是进程级的中断请求,系统定义了30余种信号,kill是管理员用来发送信号的一种手段. 功能说明:删除执行中的程序或工作. 语 法:kill [-s <信息名称或编号> ...

  2. BZOJ 1492 [NOI2007] - cash

    Description 最初你有 S 块钱, 有 N 天给你来兑换货币, 求最大获利. 一共只有两种货币 A , B . 对于每一天, 给定 3 个系数 A[i], B[i], Rate[i] A[i ...

  3. 汕头市队赛 SRM 08 A

    比赛没参加 所以回来补题咯 A还是自己YY出来了的 可惜比赛没有打 描述 给一个 01 串设为其 S,询问是否存在只出现两次的 01 串 T. 这里的出现定义为存在一串下标 ,满足  且 . 输入格式 ...

  4. 转载：C++ 多继承和虚继承的内存布局

    C++ 多继承和虚继承的内存布局[已翻译100%] 英文原文:Memory Layout for Multiple and Virtual Inheritance 标签: <无> run_ ...

  5. 通过OpenGL ES在iOS平台实践增强现实

    http://www.cnblogs.com/elvisyzhao/p/3398250.html 本文采用OpenGL ES 1固定渲染管线实现,目标为在设备拍摄到的现实世界中,绘制世界坐标轴,并根据 ...

  6. 在PE中，新增节，添加代码

    在PE中,新增节,添加代码 一.先判断节表后是否有空闲位置,添加节表信息,必须多出两个节表位置,最后以零结尾. 二.新增节后,需要修改以下信息 1.添加一个新节,可以复制一份,最好是拥有可执行属性的节 ...

  7. 查看 Laravel 的 SQL 语句的方法

    在使用 Laravel 的 Eloquent 进行数据查询的时候,很多小伙伴都想看到背后执行的 SQL 语句到底是什么样的,这小笔录就是解决这个小问题的: 在 Providers/AppService ...

  8. Laravel使用db:seed生成测试数据

    创建 生成数据 定义字段 call方法调用 执行 seeder里如有多个可指定class 整理自www.laravist.com 视频教程

  9. ORA-01940: cannot drop a user that is currently connected

    https://www.cnblogs.com/lwlxqlccc/p/8694696.html

  10. (9)oracle 表的基本查询

    转到进阶查询 查看表的结构 desc  表名; desc student; 查看整张表的数据 select * from 表名; //查整张表很耗时间 select* from student; 查看 ...