1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>单一按钮显示/隐藏</title>
  6. </head>
  7. <style>
  8. body,div,ul,li,h2{margin:0;padding:0;}
  9. body{font:12px/1.5 Tahoma;}
  10. ul{list-style-type:none;}
  11. #outer{width:200px;border:1px solid #aaa;margin:10px auto;}
  12. #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;}
  13. #outer h2.open{background-position:180px -12px;}
  14. #outer ul{border-top:1px solid #DEE3E6;}
  15. #outer li{height:25px;line-height:25px;vertical-align:top;}
  16. #outer a{display:block;color:#6b7980;background:#e9edf2;text-decoration:none;padding:0 10px;}
  17. #outer a:hover{background:#fff;text-decoration:underline;}
  18. </style>
  19. <script>
  20. window.onload = function ()
  21. {
  22.     var oH2 = document.getElementsByTagName("h2")[0];
  23.     var oUl = document.getElementsByTagName("ul")[0];
  24.     oH2.onclick = function ()
  25.     {
  26.         var style = oUl.style;
  27.         style.display = style.display == "none" ? "block" : "none";
  28.         oH2.className = style.display == "none" ? "open" : ""
  29.     }
  30. }
  31. </script>
  32. <body>
  33. <div id="outer">
  34.     <h2>播放列表...</h2>
  35.     <ul>
  36.         <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
  37.         <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>
  38.         <li><a href="javascript:;">猜不透 - 丁当</a></li>
  39.         <li><a href="javascript:;">自导自演 - 周杰伦</a></li>
  40.         <li><a href="javascript:;">浪漫窝 - 弦子</a></li>
  41.         <li><a href="javascript:;">流年 - 王菲</a></li>
  42.     </ul>
  43. </div>
  44. </body>
  45. </html>

提示框效果

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>提示框效果</title>
  6. <style>
  7. body,div,h2,ul,li{margin:0;padding:0;}
  8. body{font:12px/1.5 Tahoma;}
  9. ul{list-style-type:none;}
  10. #outer{width:560px;border:1px solid #333;margin:10px auto;padding:0 0 10px 10px;}
  11. #outer h2{line-height:30px;text-align:center;margin-top:10px;}
  12. #outer ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  13. #outer ul{zoom:1;}
  14. #outer ul li{position:relative;float:left;border:1px solid #333;margin:10px 10px 0 0;display:inline;}
  15. #outer ul li img{position:absolute;top:-14px;left:-14px;display:none;border:2px solid #999;cursor:crosshair;}
  16. #outer ul li a{color:#666;width:80px;height:80px;display:block;background:#f0f0f0;text-decoration:none;padding:10px;}
  17. #outer ul li a strong{display:block;}
  18. .zindex{z-index:1;}
  19. </style>
  20. <script>
  21. window.onload = function ()
  22. {
  23.     var oLi = document.getElementsByTagName("li");
  24.     var oA = document.getElementsByTagName("a");
  25.     var oImg = document.getElementsByTagName("img");
  26.     for (var i = 0; i < oLi.length; i++)
  27.     {
  28.         oA[i].index = oImg[i].index = i;
  29.         oA[i].onmouseover = function() {
  30.             oLi[this.index].className = "zindex";
  31.             oImg[this.index].style.display = "block"
  32.         };
  33.         oA[i].onmouseout = function ()
  34.         {
  35.             oLi[this.index].className = "";
  36.             oImg[this.index].style.display = "none"
  37.         };
  38.         oImg[i].onmouseover = function()
  39.         {
  40.             oLi[this.index].className = "zindex";
  41.             this.style.display = "block"
  42.         };
  43.         oImg[i].onmouseout = function()
  44.         {
  45.             oLi[this.index].className = "";
  46.             this.style.display = "none"
  47.         }
  48.     }
  49. }
  50. </script>
  51. </head>
  52. <body>
  53. <div id="outer">
  54.     <h2>名车车标展示-鼠标移过显示车标</h2>
  55.     <ul>
  56.         <li>
  57.             <a href="javascript:;" title="BMW 宝马汽车"><strong>BMW</strong>宝马汽车</a>
  58.             <img src="img/1.jpg" alt="BMW 宝马汽车" />
  59.         </li>
  60.         <li>
  61.             <a href="javascript:;" title="Alfa Romeo 阿尔法-罗米欧"><strong>Alfa Romeo</strong> 阿尔法-罗米欧</a>
  62.             <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" />
  63.         </li>
  64.         <li>
  65.             <a href="javascript:;" title="Skoda 斯柯达"><strong>Skoda</strong> 斯柯达</a>
  66.             <img src="img/3.jpg" alt="Skoda 斯柯达" />
  67.         </li>
  68.         <li>
  69.             <a href="javascript:;" title="Volkswagen 大众汽车"><strong>Volkswagen</strong> 大众汽车</a>
  70.             <img src="img/4.jpg" alt="Volkswagen 大众汽车" />
  71.         </li>
  72.         <li>
  73.             <a href="javascript:;" title="Saab 萨布牌轿"><strong>Saab</strong> 萨布牌轿车</a>
  74.             <img src="img/5.jpg" alt="Saab 萨布牌轿" />
  75.         </li>
  76.         <li>
  77.             <a href="javascript:;" title="Lamborghini 兰博基尼"><strong>Lamborghini</strong> 兰博基尼</a>
  78.             <img src="img/6.jpg" alt="Lamborghini 兰博基尼" />
  79.         </li>
  80.         <li>
  81.             <a href="javascript:;" title="Porsche 保时捷"><strong>Porsche</strong> 保时捷</a>
  82.             <img src="img/7.jpg" alt="Porsche 保时捷" />
  83.         </li>
  84.         <li>
  85.             <a href="javascript:;" title="Peugeot 标致"><strong>Peugeot</strong> 标致</a>
  86.             <img src="img/8.jpg" alt="Peugeot 标致" />
  87.         </li>
  88.         <li>
  89.             <a href="javascript:;" title="Mercedes1 梅赛德斯 奔驰"><strong>Mercedes1</strong> 梅赛德斯 奔驰</a>
  90.             <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" />
  91.         </li>
  92.         <li>
  93.             <a href="javascript:;" title="Buick 别克汽车"><strong>Buick</strong> 别克汽车</a>
  94.             <img src="img/10.jpg" alt="Buick 别克汽车" />
  95.         </li>
  96.     </ul>
  97. </div>
  98. </body>
  99. </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. FreeFileSync

    FreeFileSync is an Open-Source folder comparison and synchronization tool. It is optimized for highe ...

  2. 几个简单的VBS脚本程序以及其JS实现

    1 语音发声脚本,调用sapi.spvoice读英语hh  保存为say.vbs,点击打开就可以念诗: set objTTS = CreateObject("sapi.spvoice&quo ...

  3. VS2013 更改MFC标题栏图标和生成的执行文件图标

    创建一个新工程,可以什么都不加.打开.rc,  创建或打开Icon资源(以下都以Icon为例).     单击工程窗口的资源视图标签,选中资源ID为IDR_MAINFRAME图标资源,然后按Delet ...

  4. ubuntu 安装TensorFlow

    1.安装pip $ sudo apt-get install python-pip python-dev 2.安装 TensorFlow for Python 2.7 # Ubuntu/Linux - ...

  5. Mex函数与C++数据矩阵交互方法

    #include "mex.h" #include <iostream> #include <windows.h> #include "math. ...

  6. React Native WebView关闭缓存

    React Native WebView关闭缓存 网上搜索没有找到关闭React Native下webview控件的缓存的方法,经测试找到解决方案,记录如下 核心思路:通过请求时设置请求头,使页面缓存 ...

  7. api访问参数

    一.Get请求 1.一个参数时 2. 二.Post请求

  8. HDU 5732 Subway（2016多校1J，树的重心 + 哈希）

    题目链接  2016多校1 Problem J 题意  给定两棵相同的树,但是编号方案不同.求第一棵树上的每个点对应的第二棵树上的点.输出一种方案即可. 首先确定树的直径的中点.两棵树相等意味着两棵树 ...

  9. Python的功能模块[2] -> abc -> 利用 abc 建立抽象基类

    abc模块 / abc Module 在定义抽象方法时,为了在初始化阶段就检测是否对抽象方法进行了重定义,Python 提供了 abc 模块. from abc import ABCMeta, abs ...

  10. Python的支持工具[1] -> 可执行文件生成工具[1] -> cx_freeze

    cx_freeze cx_Freeze 是一个第三方库,可以用于将 Python 的代码打包成可执行文件,下面介绍如何利用一个脚本文件将 Python 代码变为 exe 可执行文件. 首先,需要安装 ...