单一按钮显示/隐藏&&提示框效果

最新推荐文章于 2023-05-17 10:57:45 发布
最新推荐文章于 2023-05-17 10:57:45 发布
阅读量162 收藏 1
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/mayufo/p/4474960.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>
</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>

 

转载于:https://www.cnblogs.com/mayufo/p/4474960.html

weixin_34211761
关注
自学web前端练手——js的单一按钮显示与隐藏
lvshaoshishang的博客
03-15 561
效果如下： 单一按钮显示与隐藏可来回切换 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单一按钮显示隐藏</title> <style type="text/css"> body,div,ul,li...
js点击实现显示和隐藏效果
热门推荐
luckybuling
07-12 3万+
1、html结构 &lt;img src="images/xingxing.jpg" alt="" id="img"&gt; &lt;button id="btn_show" &gt; 显示 &lt;/button&gt; &lt;button id="btn_hidden"&gt; 隐藏 &lt;/button
单一按钮显示/隐藏
weixin_30419799的博客
07-30 188
以上是运行的效果，可以实现列表的收放。 <!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/xh...
javascript实现单按钮显示隐藏元素
海风依旧
11-16 6914
javascript实现单按钮显示隐藏元素
【fgm.cc练习2-9】单一按钮显示/隐藏
DGT4720的博客
11-13 223
练习地址：http://www.fgm.cc/learn/lesson2/09.html 实现思路： 下拉三角形通过border来画：div宽高设为0，border值设大点，保留三角形底边那边的边框的颜色，其他颜色设为transparent。transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。具体可看这篇：CSS绘制三角形——border法。...
js提示框制作js文字提示框,js图片提示框
11-24
在JavaScript中，我们可以这样显示和隐藏这个提示框： ```javascript function showCustomPrompt(text, imageUrl) { document.getElementById('promptText').innerText = text; document.getElementById('...
jquery alert 提示框、动态加载提示框、jquery插件
03-10
使用jQuery，我们可以方便地监听事件，利用AJAX的success或error回调来控制提示框的显示与隐藏。 三、jQuery插件 jQuery插件是开发者为扩展jQuery功能而编写的代码，它们遵循特定的结构，通常包括一个函数，该函数...
js提示框特效js提示框特效js提示框特效js提示框特效
03-23
这个文件可能包含了多种提示框样式和交互效果，如动画过渡、动态图标、自定义按钮等。通过使用这样的库，开发者可以轻松地在项目中添加丰富多彩的提示框，提升网站的视觉吸引力和互动性。 自定义提示框的实现通常...
js 实现多种绚丽的弹出式提示框
10-10
JavaScript中的`alert()`、`prompt()`和`confirm()`函数是基础的内置提示框，但它们样式单一，难以满足现代网页设计的需求。因此，我们需要自定义提示框来实现更丰富的功能和视觉效果。 一、基本结构 创建自定义...
js 提示框
03-22
通常，HTML文件会包含提示框的结构，而JavaScript文件负责添加交互逻辑和动态显示/隐藏提示框。 5. **模态对话框** - 自定义提示框往往采用模态设计，这意味着用户必须先关闭提示框才能继续与页面其他部分交互。这...
点击按钮，实现菜单的显示与隐藏
最新发布
weixin_66157105的博客
05-17 259
隐藏之后，侧边栏的背景不变，是因为我们给侧边栏设置的宽度，想要动态的切换显示与隐藏，还想要背景跟着一起改变，可以通过三元表达式动态绑定width的值。
jQuery单按钮实现图片的显示与隐藏
林的博客
09-02 6090
很多人在做这个的时候会形成一个思维误区，习惯用click来实现,事实上click是个单独函数是实现不了用一个按钮来解决的，所以我们就要用到toggle（用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 ）； //实现代码 &amp;lt;script type=&quot;text/javascript&quot;&amp;g...
jQuery实现简单点击隐藏和点击显示列表的功能
weixin_34034261的博客
12-29 3186
实现功能为:列表内容较长 隐藏部分内容 点击按钮显示隐藏内容 再次点击隐藏内容 jQ代码如下: $(function(){ var $cate = $("ul li:gt(5):not(':last')") ;//获取大于第五行的内容不包括最后一行为对象 $cate.hide();//将对象隐藏 var...
实现点击按钮切换显示和隐藏效果
wieyi的博客
04-04 1万+
 点击同一个按钮可以实现一个元素的显示和隐藏的切换，下面就通过代码实例介绍一下如何实现此效果，代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
点击按钮显示和隐藏列表内容
sunnyfan的博客
11-01 6715
点击按钮显示和隐藏列表内容<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击展开和隐藏</title> <link rel="stylesheet" type="text/css" href="../reset.css"> <link rel="stylesheet" typ
一些有用的javascript实例分析(二)
weixin_34365635的博客
05-10 92
原文:一些有用的javascript实例分析(二) 1 5 求出数组中所有数字的和 2 window.onload = function () 3 { 4 var oBtn = document.getElementsByTagName("button")[0]; 5 var oInput = document.getElementsByTagName...
QT 实时显示鼠标所指的坐标 && 监测键盘事件
阳光非宅男的博客
02-20 9538
1 捕获鼠标事件 void EventLabel::mouseMoveEvent(QMouseEvent *event) { QString msg; msg.sprintf("move: %d,%d",event-&gt;x(), event-&gt;y()); this-&gt;setText(msg); } void EventLabel::mousePres...
Python GUI编程：按钮、单选与复选框操作详解
"这篇文档是关于Python程序设计中图形用户界面(GUI)的第四部分，主要讲解了如何使用GUI创建按钮、单选按钮、复选框和组合框，并演示了它们的声明、绑定处理函数和运行效果。" 在Python的GUI编程中，我们经常使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值