<!DOCTYPE html><html><head>???????? <meta charset="UTF-8">???????? <link rel="stylesheet" type="text/css" href="style/main.css">???????? <title>作品列表</title></head><body>???????? <div class="content">????????????????? <ol class="list" id="ol">????????????????????????? <li>?????????????????????????????????? <h1>??????????????????????????????????????????? <a href="">表單常用代碼</a>?????????????????????????????????? </h1>?????????????????????????????????? <dl>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/detach_space/derach_space.html" target="_blank">去除字符串的空格</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/verify/verify.html" target="_blank">驗證用戶是否輸入</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/inhibit_input/inhibit_input.html" target="_blank">禁止用戶輸入</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/close_imemode/close_imemode.html" target="_blank">關閉用戶使用輸入法</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/inhibit_copy_pase/inhibit_copy_pase.html" target="_blank">禁止復制粘貼</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/only_input_number/only_input_number.html" target="_blank">只能輸入數字</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/limit_string_length/limit_string_length.html" target="_blank">限制字符串長度</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/prompt_num/prompt_num.html" target="_blank">提示剩余字數</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/text_rolling/text_rolling.html" target="_blank">文字自動滾動</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/enter_submit_form/enter_submit_form.html" target="_blank">enter提交表單</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>????????????????????????????????????????????????? <a href="form/keyword_filter/keyword_filter.html" target="_blank">過濾敏感字</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/all_choose/all_choose.html" target="_blank">全選選項</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/operation_dropdown_menu/operation_dropdown_menu.html" target="_blank">添加刪除下拉選項</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/cascading_dropdown_option/cascading_dropdown_option.html" target="_blank">級聯菜單</a>??????????????????????????????????????????? </dd>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="form/enter_add_option/enter_add_option.html" target="_blank">回車添加下拉選項</a>??????????????????????????????????????????? </dd>?????????????????????????????????? </dl>????????????????????????? </li>????????????????????????? <li>?????????????????????????????????? <h1>??????????????????????????????????????????? <a href="">常用圖片相關代碼</a>?????????????????????????????????? </h1>?????????????????????????????????? <dl>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="picture/picture_magnifier/enlarge.html" target="_blank">圖片放大鏡</a>??????????????????????????????????????????? </dd>?????????????????????????????????? </dl>????????????????????????? </li>????????????????????????? <li>?????????????????????????????????? <h1>??????????????????????????????????????????? <a href="">內容展示代碼</a>?????????????????????????????????? </h1>?????????????????????????????????? <dl>??????????????????????????????????????????? <dd>???????????????????????????????????????????????????? <a href="content_exhibition/hover_prompt/prompt.html" target="_blank">單行鼠標懸停提示</a>??????????????????????????????????????????? </dd>?????????????????????????????????? </dl>????????????????????????? </li>????????????????? </ol>???????? </div>???????? <script src="style/main.js"></script></body></html>main.js文件(function (){???????? var ol = document.getElementById('ol');???????? var h1s = document.querySelectorAll('h1');??? var dls = document.querySelectorAll('dl');??? for(i=0;i < h1s.length;i++){??? ???????? h1s[i].index = i;??? h1s[i].onclick = function(){??? ???????????????? var index = this.index;??? ???????????????? dls[index].style.display = dls[index].style.display ==='block' ? 'none' : 'block';??? ???????????????? for (var k = 0; k < ps.length; k++) {??????????? if (k === index) {??????????????? continue;??????????? }??????????? dls[k].style.display = "none";??????? }??? ???????? };??? }})();
如何實現點擊h1使dl顯示或隱藏
maturity_process
2018-03-27 10:48:05
