我按著視頻上的教程做的,這是我的代碼<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>簡易日歷</title>? ? <style>? ? ? ? *{? ? ? ? ? ? padding: 0;? ? ? ? ? ? margin: 0;? ? ? ? }? ? ? ? #tab{? ? ? ? ? ? width:400px;? ? ? ? ? ? height:400px;? ? ? ? ? ? background-color:skyblue;? ? ? ? ? ? margin:100px auto;? ? ? ? }? ? ? ? #tab ul{? ? ? ? ? ? width: 400px;? ? ? ? ? ? height:300px;? ? ? ? ? ? border-bottom: 2px solid rgba(50, 50, 50, 0.38);? ? ? ? ? ? list-style: none;? ? ? ? ? ? text-align: center;? ? ? ? }? ? ? ? #tab ul li{? ? ? ? ? ? display:inline-block;? ? ? ? ? ? width:80px;? ? ? ? ? ? height:80px;? ? ? ? ? ? background-color: rgba(158, 57, 179, 0.49);? ? ? ? ? ? margin: 5px;? ? ? ? ? ? padding-top: 20px;? ? ? ? ? ? box-sizing: border-box;? ? ? ? }? ? ? ? #div1{? ? ? ? ? ? padding:20px;? ? ? ? }? ? ? ? #tab .active{? ? ? ? ? ? background-color:#f6f6f6;? ? ? ? ? ? color: red;? ? ? ? }? ? </style>? ? <script>? ? ? ? window.onload=function ()? ? ? ? {? ? ? ? ? ? var oTab=document.getElementById("tab");? ? ? ? ? ? var aLi=oTab.getElementsByTagName("li");? ? ? ? ? ? var oTxt=oTab.getElementById("div1");? ? ? ? ? ? for(i=0;i<aLi.length;i++)? ? ? ? ? ? {? ? ? ? ? ? ? ? aLi[i].index=i;? ? ? ? ? ? ? ? aLi[i].onmouseover=function ()? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? for(i=0;i<aLi.length;i++)? ? ? ? ? ? ? ? ? ? {? ? ? ? ? ? ? ? ? ? ? ? aLi[i].className = "";? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? this.className="active";? ? ? ? ? ? ? ? ? ? oTxt.innerHTML="<h2>"+this.index+"月份</h2><p>快過年了,商量商量去哪里玩吧</p>"? ? ? ? ? ? ? ? };? ? ? ? ? ? }? ? ? ? }? ? </script></head><body><div id="tab">? ? <ul>? ? ? ? <li><h2>1</h2><p>JAN</p></li>? ? ? ? <li><h2>2</h2><p>FBR</p></li>? ? ? ? <li><h2>3</h2><p>MAR</p></li>? ? ? ? <li><h2>4</h2><p>APR</p></li>? ? ? ? <li><h2>5</h2><p>MAY</p></li>? ? ? ? <li><h2>6</h2><p>JUN</p></li>? ? ? ? <li><h2>7</h2><p>JUL</p></li>? ? ? ? <li><h2>8</h2><p>AUG</p></li>? ? ? ? <li><h2>9</h2><p>SEP</p></li>? ? ? ? <li><h2>10</h2><p>OCT</p></li>? ? ? ? <li><h2>11</h2><p>NOV</p></li>? ? ? ? <li><h2>12</h2><p>DEC</p></li>? ? </ul>? ? <div id="div1">? ? ? ? <h2>1月份</h2>? ? ? ? <p>快過年了,商量商量去哪里玩吧</p>? ? </div></div></body></html>---------------------------------------------------------------------------------------------這樣運行的話會提示一個報錯-----------------------------------------------------------------------------其實我一開始是把最下面的那個div設(shè)置了class ?沒用id,但是那樣沒法用innerHTML ?然后我新建了一個文件專門試了試innerHTML ?class的沒法用innerHTML ? 之后設(shè)置成id才能導(dǎo)入 ? 但是設(shè)置成id之后我原本的onmouseover的都不生效了請問問題出在哪里呀???
js新手關(guān)于做簡易日歷的基礎(chǔ)問題
Ni14
2016-12-08 17:27:32