JavaScript作业----(3)选项卡之鼠标移入切换

最新推荐文章于 2019-04-03 07:52:11 发布
最新推荐文章于 2019-04-03 07:52:11 发布
阅读量833 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yoke743/article/details/80506969
版权

三.选项卡

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
		body{
			width:100%;
			background-color:#ffffcc;
			background-image:images/1.jpg;
			}
		#box{
		  margin:20px 500px;
		}
		#sidebar_a p{
		  background:#66ff99;
		  width:60px;
		  height:40px;
		  text-align:center;
		  border:1px solid #000;
		  
		  color:#fff;
		}
		#img{
		  width:200px;
		  height:166px;
		  border:1px solid red;
		  background:images/g1.jpg;
		}
		.f_left,.f_right{float:left;}
		
	</style>
 </head>
 <body>
    <div id="box">
	  <div id="sidebar_a" class="f_left">
		 <p class="a">a</p>
		 <p class="b">b</p>
		 <p class="c">c</p>
		 <p class="d">d</p>
   	  </div>
	  <div id="img" class="f_right"></div>
	</div>
    <script>
	 var img = document.getElementById("img");//获取切换背景色的标签
     var p = document.querySelectorAll("p");//获取侧边栏导航
     //console.log(p);
	 p[0].onmouseover = function(){
	   img.style.backgroundColor = "#ff66ff";
	 }
	  p[1].onmouseover = function(){
	   img.style.backgroundColor = "#ffcc00";
	 }
	  p[2].onmouseover = function(){
	   img.style.backgroundColor = "#6600cc";
	 }
	  p[3].onmouseover = function(){
	   img.style.backgroundColor = "#33ff00";
	 }
	</script>
 </body>
</html>


yoke743
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery鼠标经过选项卡内容切换代码.zip
07-11
jQuery鼠标经过选项卡内容切换代码是一款橙色的选项卡切换样式代码。
JavaScript实现的选项卡切换
浮空岛
03-01 545
实践题 - 选项卡          /* CSS样式制作 */        *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}      ul{list-style-type: none;}      a{text-decoration: none;}      #tab-list{width: 275px
EasyUI-选项卡鼠标经过事件
dxm809的博客
04-03 306
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）
11-23
效果图如下所示： 废话不多说了，直接给大家贴js代码了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ padding: } button{ width: 95px; } .active { background-color: yellow; } #wrap{ width:510px; overflow: hidden; margin:0 auto; } #inner{ width:9999px; overflo
JS小练习之鼠标移入移出实现的一些效果
weixin_41586886的博客
06-01 4665
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标移入移出显示效果&lt;/title&gt; &lt;style&gt; #di
分步解析JavaScript实现tab选项卡自动切换功能
11-26
根据`onEnd.method`的值，可以选择在鼠标移入或鼠标移出时触发自动切换。`start`方法启动自动切换，它使用`setInterval`创建了一个定时器，每隔一定时间（`dis`参数指定）就调用`change`方法。 `change`方法是关键...
jQuery鼠标滑动tab选项卡切换效果代码
11-19
这段代码在鼠标移入选项卡时，找到对应的内容区域并显示，同时隐藏其他内容。为了实现平滑的过渡效果，可以使用CSS3的`transition`属性。例如： ```css .tab-content { transition: all 0.3s ease; } ``` 当然，...
网易选项卡与滑动门菜单代码.rar
07-10
在本案例中，网易的选项卡设计采用了鼠标点击作为触发切换的事件，这符合大多数用户的操作习惯，易于理解和使用。 滑动门菜单，又称为滑动面板或滑动层，通常用于展示隐藏的内容。当鼠标悬停在特定区域时，内容会滑...
jQuery标签选项卡切换代码.zip
05-23
// 鼠标移入事件 $('#tabs ul li').on('mouseenter', function() { var tabNum = $(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('#tabs div').eq(tabNum).show().siblings...
jQuery带标题文字右侧选项卡.zip
07-05
4. **事件处理**：jQuery的事件处理功能使得我们可以轻松地响应用户的行为，如`mouseover`（鼠标移入）和`mouseout`（鼠标移出）事件。在这个选项卡设计中，当鼠标移动到文字按钮上时，触发相应的图片切换效果。 5....
css鼠标滑过内容切换代码
12-11
纯css写的鼠标点击和鼠标滑过时内容切换的代码,各位下载了用着觉得好的话多帮忙推广宣传下
tab选项卡 鼠标点击事件
03-23
使用table实现选项卡功能鼠标点击事件，可应用工于新闻等
JS实现鼠标移入移出控制图片的切换效果
热门推荐
幸运的梦之星
03-26 1万+
背景 在看专业英语的时候，学习JS的Timer Event.正好有一个例子，实现的是，图片自动切换，当鼠标点击图片的时候，停止切换。于是想要动手实践一下，并且添加上自己的想法。于是就有了下面的图片和代码。 首先，看一下效果图： 页面加载的时候，图片是每隔1s进行一次切换的，当鼠标移入的时候图片放大，并且停止切换，当鼠标移出的时候，图片缩小为原大小，继续进行切换。 关键代
js实现鼠标滑过选项卡切换效果
weixin_40568715的博客
05-19 4942
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
AmazeUI 选项卡
一直专注于互联网
02-23 1518
&lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=
【移入移出事件练习】【菜单】【选项卡】 -------this使用
weixin_30600197的博客
03-31 130
鼠标移入移出事件练习 建一个长100x100的红色 div，鼠标移入变为200x200绿色 .a { width:100px; height:100px; background-color:red ; } ———————————————————————————————— <body> <div class="a"></...
【创新发文无忧】Matlab实现阿基米德优化算法AOA-DELM的故障诊断算法研究.rar
最新发布
08-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
javascript特效--鼠标移动切换内容
06-06
好的，这是一个常见的 JavaScript 特效。你可以使用以下步骤来实现： 1. 首先，创建一个 HTML 文件，然后添加两个容器元素，一个用于显示当前内容，另一个用于显示要切换的内容。 ```html <div id="current">当前内容</div> <div id="next">下一个内容</div> ``` 2. 然后，在 JavaScript 中获取这两个元素的引用，并为容器元素添加 mousemove 事件监听器。 ```javascript var current = document.getElementById('current'); var next = document.getElementById('next'); current.addEventListener('mousemove', function() { // 切换到下一个内容 }); next.addEventListener('mousemove', function() { // 切换到上一个内容 }); ``` 3. 在事件监听器中，可以使用 innerHTML 属性来更改容器元素的内容。例如，在 current 元素的 mousemove 事件监听器中，可以将 next 元素的内容设置为当前内容。 ```javascript current.addEventListener('mousemove', function() { next.innerHTML = current.innerHTML; }); ``` 4. 最后，你可以使用 CSS 样式来使容器元素更具交互性。例如，当鼠标悬停在容器元素上时，可以更改元素的背景颜色和鼠标样式。 ```css div { background-color: #ccc; cursor: pointer; } div:hover { background-color: #eee; } ``` 这样，当用户将鼠标悬停在容器元素上时，就会切换到下一个内容。你可以使用相同的方法来切换到上一个内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值