JS制作可以選項卡切換的年歷
更新時間：2021年08月25日 09:57:26 作者：代碼小公主
這篇文章主要為大家分享了JS制作類似于選項卡切換的年歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了用JS制作簡易的可切換的年歷，類似于選項卡，供大家參考，具體內(nèi)容如下
<!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=["一月吃牛排","二月吃意面","三月看帥哥","四月看星星"
,"五月吃豬蹄","六月吃西瓜","七月吃雪糕","八月吹空調(diào)","九月?lián)鞓淙~","十月吃烤雞",
"十一月吃麻辣燙","十二月回家過年"];
li[i].onmouseover=function(){//事件綁定
for (var i=0;i<li.length;i++) {
//清除所有的li的className
li[i].className=" ";
}
this.className="active";//給當(dāng)前的li添加className
bottom.innerHTML='<h2>'+(this.index +1)+'月活動 </h2><p>'+arr[this.index]+'</p>';
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中this做事件參數(shù)相關(guān)問題解答
有關(guān)this想必大家早有所耳聞，只不過在使用中不是那么在意而已，接下來為大家介紹下this做事件參數(shù)問題，感興趣的你可不要錯過了哈2013-03-03
ECharts 是一個使用JavaScript實現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了JavaScript 預(yù)解釋,包含帶var關(guān)鍵字預(yù)解釋、帶function關(guān)鍵字預(yù)解釋,需要的朋友可以參考下2015-01-01
JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法
這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript實現(xiàn)頁面高亮操作提示和蒙板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
javascript實現(xiàn)根據(jù)3原色制作顏色選擇器的方法
這篇文章主要介紹了javascript實現(xiàn)根據(jù)3原色制作顏色選擇器的方法,涉及javascript操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了iframe父頁面獲取子頁面參數(shù)的方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了如何利用HTML和JavaScript實現(xiàn)監(jiān)控切屏功能，監(jiān)控是否離開當(dāng)前頁面，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)點擊切換和自動播放的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
實現(xiàn)checkbox全選、反選、取消JavaScript小腳本異常
實現(xiàn)checkbox全選，反選，取消JavaScript小腳本的時出現(xiàn)點小異常，大家可以看看，以后就不要犯這個特別2的錯誤了2014-04-04