第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

我的過濾器系統(tǒng)在 html 中出現(xiàn) JS 錯(cuò)誤

我的過濾器系統(tǒng)在 html 中出現(xiàn) JS 錯(cuò)誤

守候你守候我 2022-06-09 16:46:22
我的 html 過濾器系統(tǒng)有問題。這是錯(cuò)誤：未捕獲的類型錯(cuò)誤：無法在 scripts.js:40 處讀取 null 的屬性“getElementsByClassName”系統(tǒng)可以工作，但我希望修復(fù)錯(cuò)誤filterSelection("all")function filterSelection(c) {  var x, i;  x = document.getElementsByClassName("filterDiv");  if (c == "all") c = "";  for (i = 0; i < x.length; i++) {    w3RemoveClass(x[i], "show");    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");  }}function w3AddClass(element, name) {  var i, arr1, arr2;  arr1 = element.className.split(" ");  arr2 = name.split(" ");  for (i = 0; i < arr2.length; i++) {    if (arr1.indexOf(arr2[i]) == -1) {      element.className += " " + arr2[i];    }  }}function w3RemoveClass(element, name) {  var i, arr1, arr2;  arr1 = element.className.split(" ");  arr2 = name.split(" ");  for (i = 0; i < arr2.length; i++) {    while (arr1.indexOf(arr2[i]) > -1) {      arr1.splice(arr1.indexOf(arr2[i]), 1);    }  }  element.className = arr1.join(" ");}var btnContainer = document.getElementById("myBtnContainer");var btns = btnContainer.getElementsByClassName("btn");for (var i = 0; i < btns.length; i++) {  btnContainer[i].innerHTML = Quotes[x]  btns[i].addEventListener("click", function() {    var current = document.getElementsByClassName("active");    current[0].className = current[0].className.replace(" active", "");    this.className += " active";  });}
查看完整描述

2 回答

?
炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

這是一個(gè)奇怪的說法

btnContainer[i].innerHTML = Quotes[x]

如果它起作用了，你的按鈕就會(huì)消失

要在下面使用我的代碼，您需要

  • 用名為 data-select 的數(shù)據(jù)屬性替換 onclicks 并添加active到“all”按鈕

  • 更改示例 div 以匹配他們的類

  • display: none; /* Hidden by default */從 filterDiv 類中刪除

  • 將 .show 更改為 .hide

像這樣

.hide {

  display: none;

}

完整代碼


const filterSelection = sel => { // passing a string 

  [...document.querySelectorAll(".filterDiv")].forEach(div => {

    div.classList.toggle("hide",

      sel !== "all" && !div.classList.contains(sel) // hide if not "all" and no match

    )

  })

};

window.addEventListener("load", function() { // when the page loads

  const btnContainer = document.getElementById("myBtnContainer");

  // btnContainer.innerHTML += Quotes[0]; // was x

  btnContainer.addEventListener("click", function(e) { // any click on the button container

    const tgt = e.target; 

    if (tgt.classList.contains("btn")) { // check if tgt is a button

      filterSelection(tgt.getAttribute("data-select")); // grab the attribute

      const current = document.querySelector(".btn.active"); // get the active

      current.classList.remove("active"); // remove the active

      tgt.classList.add("active"); // add active to button clicked

    }

  })

})

filterSelection("all");

 body {

    background-color: #383838;


}




.Navbar {

background-color: rgb(26, 25, 25);

overflow: hidden;

margin: -16px -8px;

}



.Navbar a {

    float: left;

    color: #f2f2f2;

    text-align: center;

    text-decoration: none;

    padding: 18px 20px;

    font-size: 15px;

    font-family: Arial;

    font-weight: bold;

    line-height: 20px;

}


.Navbar a:hover {

    background-color: #333;

    color: #f2f2f2;

} 



.container {

    overflow: hidden;

    font-family: Arial;

    font-size: 15px;

    font-weight: bold;

  }

  

  .filterDiv {

    float: left;

    background-color: rgb(26, 25, 25);

    color: #ffffff;

    width: 100px;

    line-height: 100px;

    text-align: center;

    margin: 4px;

    /* display: none; */ /* Hidden by default */ 

  }




  .hide {

    display: none;

  }

  

  /* Style the buttons */

  .btn {

    border: none;

    outline: none;

    padding: 12px 16px;

    background-color: rgb(31, 31, 31);

    cursor: pointer;

    color: white;

    font-family: Arial;

  }

  

  /* Add a light grey background on mouse-over */

  .btn:hover {

    background-color: rgb(46, 46, 46);

  }

  

  /* Add a dark background to the active button */

  .btn.active {

    background-color: #666;

    color: rgb(31, 31, 31);

  }


  .navbar2 {

    background-color: rgb(31, 31, 31);

    overflow: hidden;

    height: 40px;

    margin: 16px -8px;

  }






  a {

      text-decoration: none;




  }


  h1 {

      font-family: Arial;

      text-align: center;

      color: white;




  }


  .uiltje {

      margin: 20px -8px;





  }

<div id="myBtnContainer">

  <button class="btn active" data-select="all"> Show all</button>

  <button class="btn" data-select="games"> Games</button>

  <button class="btn" data-select="ai"> AI</button>

  <button class="btn" data-select="tools"> Tools</button>

</div>



<div class="container">

  <div class="filterDiv tools">Sample Tool</div>

  <div class="filterDiv games">Sample Game</div>

  <div class="filterDiv ai">Sample AI</div>

</div>


查看完整回答
反對(duì) 回復(fù) 2022-06-09
?
翻過高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

您應(yīng)該將 js 代碼放在 html 代碼之后的頁腳中



查看完整回答
反對(duì) 回復(fù) 2022-06-09
  • 2 回答
  • 0 關(guān)注
  • 110 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)