JS制作可以选项卡切换的年历
本文实例为大家分享了用JS制作简易的可切换的年历，类似于选项卡，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
background-color: green;
border-radius: 20px;
padding: 10px;
height: 800px;
width: 450px;
margin: 20px auto;
}
ul,li{
margin: 0;
padding: 0;
list-style-type: none;
}
ul{
overflow: hidden;
}
li{
background-color: yellow;
height: 120px;
width:120px;
float: left;
margin: 10px;
text-align: center;
color:blueviolet;
}
#bottom{
margin: 10px;
}
.active{
background-color: crimson;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li class="active"><h2>一月</h2><p>January </p></li>
<li><h2>二月</h2><p>February </p></li>
<li><h2>三月</h2><p>March </p></li>
<li><h2>四月</h2><p> April </p></li>
<li><h2>五月</h2><p> May </p></li>
<li><h2>六月</h2><p>June</p></li>
<li><h2>七月</h2><p>July </p></li>
<li><h2>八月</h2><p>August</p></li>
<li><h2>九月</h2><p>September </p></li>
<li><h2>十月</h2><p> October </p></li>
<li><h2>十一月</h2><p> November </p></li>
<li><h2>十二月</h2><p>December</p></li>
</ul>
<div id="bottom">
<h2>一月</h2>
<p>天气很好，去哪里玩呢？？？</p>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var bottom=document.getElementById("bottom");
var li=box.getElementsByTagName("li");
for (var i=0;i<li.length;i++) {
li[i].index=i;
var arr=["一月吃牛排","二月吃意面","三月看帅哥","四月看星星"
,"五月吃猪蹄","六月吃西瓜","七月吃雪糕","八月吹空调","九月捡树叶","十月吃烤鸡",
"十一月吃麻辣烫","十二月回家过年"];
li[i].onmouseover=function(){//事件绑定
for (var i=0;i<li.length;i++) {
//清除所有的li的className
li[i].className=" ";
}
this.className="active";//给当前的li添加className
bottom.innerHTML='<h2>'+(this.index +1)+'月活动 </h2><p>'+arr[this.index]+'</p>';
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js制作简易年历完整实例
本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点. innerHtml的用法 现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了. 例如top.innerHTML="";就可以在top对应的位置出现一个button了! 程序实现思
-
利用JS制作万年历的方法
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢 1.HTML布局: <div id="calendar"> <div id="month_year"> <select id="year"></select>年 <select id="month"></select>月 </div>
-
JavaScript实现年历效果
本文实例为大家分享了JavaScript实现年历效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作年历</title> <style> body{text-align:center;} .box{margin:0 auto;width:880px;} .title{background:
-
JS制作类似选项卡切换的年历
本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad
-
JS制作可以选项卡切换的年历
本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad
-
js实现Tab选项卡切换效果
本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js&quo
-
原生js实现tab选项卡切换
本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre
-
Vue.js tab实现选项卡切换
本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo
-
JS实现多重选项卡切换轮播图
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
-
js实现tab选项卡切换功能
话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; list-style: none; box-sizing: border-box; } .menu{ position: re
-
轻松实现js选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --> <ul class="tab_menu"> <li class="selected">房产</li> <li>家居</li> <li>二手房</li> </ul> <div class="tab_box"> <div> 275万购昌平邻铁
-
JS基于myFocus库实现各种功能的tab选项卡切换效果
本文实例讲述了JS基于myFocus库实现各种功能的tab选项卡切换效果.分享给大家供大家参考.具体如下: 这里介绍使用myFocus-tab实现各种功能的选项卡切换,有的是带有动画效果的,各款基于myFocus库制作的焦点图风格皮肤,可自行按需选择,myFocus焦点图库及皮肤可自由使用,保留作者相关信息即可,谢谢支持!^^ 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-myfocus-plug-tab-cha-nav-codes/ 具