<!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. Java并发（1）- 聊聊Java内存模型

    引言 在计算机系统的发展过程中,由于CPU的运算速度和计算机存储速度之间巨大的差距.为了解决CPU的运算速度和计算机存储速度之间巨大的差距,设计人员在CPU和计算机存储之间加入了高速缓存来做为他们之间 ...

  2. RSA解密报错java.security.spec.InvalidKeySpecException的解决办法

    java.security.spec.InvalidKeySpecException: java.security.InvalidKeyException: IOException : algid p ...

  3. 蓝牙攻击指南（kali）

    基本操作 hciconfig 查看蓝牙设备信息 hcitool:这是一个查询工具. 可以用来查询设备名称,设备ID,设备类别和设备时钟. hcidump:可以使用这个来嗅探蓝牙通信 hciconfig ...

  4. (转）Python 操作 Windows 粘贴板

    转自: http://outofmemory.cn/code-snippet/3939/Python-operation-Windows-niantie-board Python 操作 Windows ...

  5. 一篇不错的v4l2入门文档【转】

    转自:http://blog.chinaunix.net/uid-26851094-id-3270803.html 原帖地址: http://www.isongzi.com/2009/02/23/v4 ...

  6. Linux SPI总线和设备驱动架构之一：系统概述【转】

    转自:http://blog.csdn.net/droidphone/article/details/23367051/ 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 硬 ...

  7. java 24小时倒计时案例

    import java.util.Calendar; import java.util.Date; public class Daojishi { static String Countdown=&q ...

  8. c# 防止重复运行 弹出已运行窗口并传递消息

    最近在写一款软件 软件是用来接收其他程序传递过来的命令行,并形成列表 大概的最终效果就像下图一样 原本为了程序美观是打算用listbox自绘列表,字和图片都绘制好了发现自己不会绘制按钮 所以最终采用了 ...

  9. HDU 1394.Minimum Inversion Number-最小逆序数-完全版线段树(单点增减、区间求和)

    HDU1394.Minimum Inversion Number 这个题求最小逆序数,先建一个空的树,然后每输入一个值,就先查询一下,查询之后,更新线段树,然后遍历一遍,每次将第一个数放到最后之后,减 ...

  10. SPOJ 3267 DQUERY - D-query （主席树）（区间数的种数）

    DQUERY - D-query #sorting #tree English Vietnamese Given a sequence of n numbers a1, a2, ..., an and ...