欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)問題解答

    javascript中this做事件參數(shù)相關(guān)問題解答

    有關(guān)this想必大家早有所耳聞,只不過在使用中不是那么在意而已,接下來為大家介紹下this做事件參數(shù)問題,感興趣的你可不要錯過了哈
    2013-03-03
  • ECharts入門教程

    ECharts入門教程

    ECharts 是一個使用JavaScript實現(xiàn)的開源可視化庫,涵蓋各行業(yè)圖表,滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • 扒一扒JavaScript 預(yù)解釋

    扒一扒JavaScript 預(yù)解釋

    這篇文章主要介紹了JavaScript 預(yù)解釋,包含帶var關(guān)鍵字預(yù)解釋、帶function關(guān)鍵字預(yù)解釋,需要的朋友可以參考下
    2015-01-01
  • JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法

    JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法

    這篇文章主要介紹了JavaScript通過join函數(shù)連接數(shù)組里所有元素的方法,實例分析了javascript中join函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • JavaScript實現(xiàn)頁面高亮操作提示和蒙板

    JavaScript實現(xiàn)頁面高亮操作提示和蒙板

    這篇文章主要介紹了JavaScript實現(xiàn)頁面高亮操作提示和蒙板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • javascript實現(xiàn)根據(jù)3原色制作顏色選擇器的方法

    javascript實現(xiàn)根據(jù)3原色制作顏色選擇器的方法

    這篇文章主要介紹了javascript實現(xiàn)根據(jù)3原色制作顏色選擇器的方法,涉及javascript操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • iframe父頁面獲取子頁面參數(shù)的方法

    iframe父頁面獲取子頁面參數(shù)的方法

    這篇文章主要介紹了iframe父頁面獲取子頁面參數(shù)的方法,需要的朋友可以參考下
    2014-02-02
  • HTML+JS實現(xiàn)監(jiān)控切屏功能

    HTML+JS實現(xiàn)監(jiān)控切屏功能

    這篇文章主要介紹了如何利用HTML和JavaScript實現(xiàn)監(jiān)控切屏功能,監(jiān)控是否離開當(dāng)前頁面,文中的示例代碼講解詳細(xì),需要的可以參考一下
    2022-03-03
  • js實現(xiàn)點擊切換和自動播放的輪播圖

    js實現(xiàn)點擊切換和自動播放的輪播圖

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)點擊切換和自動播放的輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 實現(xiàn)checkbox全選、反選、取消JavaScript小腳本異常

    實現(xiàn)checkbox全選、反選、取消JavaScript小腳本異常

    實現(xiàn)checkbox全選,反選,取消JavaScript小腳本的時出現(xiàn)點小異常,大家可以看看,以后就不要犯這個特別2的錯誤了
    2014-04-04

最新評論