CSS选项卡(onmouseover)

最新推荐文章于 2021-08-04 00:02:11 发布
最新推荐文章于 2021-08-04 00:02:11 发布
阅读量813 收藏 1
点赞数
分类专栏： CSS Study 文章标签： css div class xhtml html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beichen_/article/details/3976079
版权

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
 <title>简洁Tab</title>
 <style type="text/css">
 <!--
 body,div,ul,li{
  padding:0;
  text-align:center;
 }
 body{
  font:12px "宋体";
  text-align:center;
 }
 a:link{
  color:#00F;
  text-decoration:none;
 }
 a:visited {
  color: #00F;
  text-decoration:none;
 }
 a:hover {
  color: #c00;
  text-decoration:underline;
 }
 ul{ list-style:none;}
 /*选项卡1*/
 #Tab1{
 width:460px;
 margin:0px;
 padding:0px;
 margin:0 auto;}
 /*选项卡2*/
 #Tab2{
 width:576px;
 margin:0px;
 padding:0px;
 margin:0 auto;}
 /*菜单class*/
 .Menubox {
 width:100%;
 background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);
 height:28px;
 line-height:28px;
 }
 .Menubox ul{
 margin:0px;
 padding:0px;
 }
 .Menubox li{
  float:left;
  display:block;
  cursor:pointer;
  width:114px;
  text-align:center;
  color:#949694;
  font-weight:bold;
  }
 .Menubox li.hover{
  padding:0px;
  background:#fff;
  width:116px;
  border-left:1px solid #A8C29F;
  border-top:1px solid #A8C29F;
  border-right:1px solid #A8C29F;
 background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);
  color:#739242;
  font-weight:bold;
  height:27px;
 line-height:27px;
 }
 .Contentbox{
  clear:both;
  margin-top:0px;
  border:1px solid #A8C29F;
  border-top:none;
  height:181px;
  text-align:center;
  padding-top:8px;
 }
 -->
 </style>
 <script>
 <!--
 /*第一种形式 第二种形式 更换显示样式*/
 function setTab(name,cursel,n){
  for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
  }
 }
 //-->
 </script>
 </head>
 <body>
 <br><br>
 <div id="Tab1">
 <div class="Menubox">
 <ul>
  <li id="one1" onmouseover="setTab('one',1,4)" class="hover">新闻1</li>
  <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>
  <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>
  <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>
 </ul>
 </div>
  <div class="Contentbox">
  <div id="con_one_1" class="hover">新闻列表1</div>
  <div id="con_one_2" style="display:none">新闻列表2</div>
  <div id="con_one_3" style="display:none">新闻列表3</div>
  <div id="con_one_4" style="display:none">新闻列表4</div>
  </div>
 </div>
 <br>
 <div id="Tab2">
 <div class="Menubox">
 <ul>
  <li id="two1" onmouseover="setTab('two',1,4)" class="hover">新闻1</li>
  <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>
  <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>
  <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li>
 </ul>
 </div>
  <div class="Contentbox">
  <div id="con_two_1" >新闻列表1</div>
  <div id="con_two_2" style="display:none">新闻列表2</div>
  <div id="con_two_3" style="display:none">新闻列表3</div>
  <div id="con_two_4" style="display:none">新闻列表4</div>
  </div>
 </div>
 </body>
 </html>
beichen_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
我可以在CSS中使用onclick效果吗？
p15097962069的博客
07-15 2295
I have an image element that I want to change on click. 我有一个想要在点击时更改的图像元素。 <img id="btnLeft"&gt
通过onmouseover选项卡实现img图片的变化
09-04
这篇文章主要讲解了如何使用JavaScript和HTML来实现在鼠标悬停（onmouseover）事件上改变选项卡中的图片。这种效果常用于网页设计，增加用户交互体验。 首先，我们要了解`onmouseover`事件，这是一个JavaScript事件...
CSS选项卡(onclick)
03-10 879
    xmlns="http://www.w3.org/1999/xhtml">    http-equiv="Content-Type" content="text/html;charset=gb2312" />  简洁Tab  type="text/css">  
html css制作按钮效果,html – Onclick CSS按钮效果
weixin_39818264的博客
06-08 328
我正在创建一个CSS按钮,我试图做一个onclick效果：当用户点击按钮时,它会按下按钮文本1px.我的问题在于它是推按钮的整个底部.你会如何进行Button这是CSS：#button {display: block;width:150px;margin:10px auto;padding:7px 13px;text-align:center;background:#a2bb33;font-siz...
css中的伪类on,CSS“onclick”伪类不工作
weixin_35949064的博客
08-04 398
我的目的是显示模式表单，并在用户点击角落处的[x]按钮或在10秒后自动关闭时关闭它。唯一的问题是当我单击[x]按钮时表单无法关闭。下面的代码有什么问题？的index.html：XHi, this is modal form.setTimeout(function() {$('#openModal').fadeOut('slow'); }, 10000);的style.css：.modalDialo...
CSS-事件 -单击双击、失去or获得焦点、加载事件、鼠标事件、键盘事件、选择与改变、表单事件
weixin_43998127的博客
10-13 4158
CSS事件 1.点击事件 1.1 onclick:单击事件 1.2 ondblclick:双击事件 2.焦点事件 2.1 onblur: 失去焦点 2.2 onfocus: 元素获得焦点 3.加载事件 onload: 一张页面或一幅图像完成加载。 4.鼠标事件 4.1 onmousedown 鼠标按钮被按下 4.2 onmouseup 鼠标按钮被松开 4.3 onmousemove 鼠标被移动 4.4 onmouseover 鼠标被移动到某个元素上 4.5 onmouseout 鼠标从某元素移开 5.键盘事
js实现选项卡效果
10-15
在JavaScript编程中，实现选项卡效果是一项常见的任务，它能够为用户提供友好的交互界面，将大量信息分组展示。在给定的代码示例中，我们看到了一个简单的JS实现选项卡的方法，它通过监听鼠标悬停事件来切换显示的...
JavaScript版TAB选项卡效果实例
10-26
CSS部分定义了样式规则，比如`.none`类使得未选中的内容区域默认不可见，`.tabTitle`和`li`元素的布局样式，以及选中和未选中状态下选项卡的背景图像。每个内容区域的宽度、高度和边框样式也被定义。 这个...
基于JavaScript实现选项卡效果
10-19
总的来说，实现JavaScript选项卡效果的关键在于理解DOM操作、事件监听、CSS类的使用以及适当的页面初始化时机。通过这些技术的结合，可以创建出交互性强、用户体验良好的选项卡组件。对于网页开发者来说，掌握这种...
CSS 点击事件on 和onclick有什么区别？ // CSS关于文本的那几个实用的属性
皮卡丘の开发之路
07-03 9007
2.CSS文本 2.1 white-space: pre-line; 强制文字进行换行，前提是在文本中要先在文字中加” \n “，这样css识别出来在此处进行强制换行。word-wrap:normal | break-word, break-word可以将内容在边界内换行（不截断英文单词的换行）。 点击事件on和onclick 两者之间的区别（很重要。。。
html css 其他常用 onclick跳转
weixin_30627381的博客
08-14 439
opacity: 0.5. 0-1 透明度 cursor: pointer;手指clear:both 清楚浮动我是医生不是人文本内容超出框word-wrap:break-word;word-break:break-all;overflow: hidden; 前后端时间格式统一{{ row.date|date:"Y-m-d H:i:s"}}去除默认样式，右下角的可拉伸 input...
css实现点击事件
qq_42908794的博客
10-14 2万+
一、选择胶囊 &lt;style&gt; *{padding:0;margin:0} body{background: #abcdef} input{display: none} .switch{ position:relative; display: block; width:38px...
Javascript中点击（click）事件的3种写法
热门推荐
h5css3_linhuai的博客
02-20 17万+
方法一： Javascript中点击事件方法一 click var btn = document.getElementById("btn"); btn.onclick=function(){ alert("hello world"); } 消除事件：btn.onclick=null; 方法二： Javascript中点击事件方法二
JavaScript使用事件onclick导致css样式失效问题
夜一
09-08 3964
问题：JavaScript使用事件onclick导致css样式失效 首先,我们用以下代码得到的是一个样式没有失效的红色”超链接”,如下图1 代码1： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title
css导航栏横向二级菜单onmouseover
最新发布
10-26
CSS导航栏横向二级菜单onmouseover是一种常见的网页导航栏设计方式。它通过CSS的定位属性和JavaScript的事件监听实现了鼠标悬停在主菜单上时，显示对应的二级菜单的效果。具体实现方法如下： 1. 使用CSS设置主菜单和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值