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

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

我怎樣才能提高使用 Javascript 定位我的 html 元素的效率

我怎樣才能提高使用 Javascript 定位我的 html 元素的效率

炎炎設(shè)計(jì) 2023-01-06 16:06:23
我有一個(gè)帶有鏈接的菜單，當(dāng)我單擊每個(gè)鏈接時(shí)，我讓它們將小時(shí)的不透明度切換為 1，當(dāng)然，使菜單上的所有其他鏈接（小時(shí)）恢復(fù)到他們之前的原始不透明度 0（經(jīng)典菜單 UX ).問(wèn)題是要實(shí)現(xiàn)這一點(diǎn)，我必須使用 2 個(gè)嵌套的 for 循環(huán)使用 JS。從我對(duì) Big O 表示法的了解來(lái)看，這不是很有效，尤其是使用 jquery 時(shí)，所有這些代碼都在一行中完成。我的問(wèn)題是如何僅使用 Vanilla JS 提高此代碼的效率？HTML<div className="menu">    <h6>Home<hr/></h6>    <h6>Movies<hr/></h6>    <h6>TV Shows<hr/></h6>    <h6>Documentaries<hr/></h6>    <h6>Favorites<hr/></h6>    <h6>Collection<hr/></h6></div>JSconst menulink = document.querySelectorAll('.menu h6')for(let item of menulink) {  item.onclick = () => {    for(let i=0;i<menulink.length;i++) {      menulink[i].querySelector('hr').style.opacity = '0'         }    item.querySelector('hr').style.opacity = '1'  } } 
查看完整描述

5 回答

?
牧羊人nacy

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

我認(rèn)為你可以實(shí)現(xiàn)這個(gè)保存當(dāng)前項(xiàng)目：


const menulink = document.querySelectorAll('.menu h6');

let current = null;


for(let item of menulink) {

  item.onclick = () => {

    if (current) current.style.opacity = '0'

    current = item.querySelector('hr')

    current.style.opacity = '1'

  } 

}

hr {

  opacity: 0;

}

<div class="menu">

    <h6>Home<hr/></h6>

    <h6>Movies<hr/></h6>

    <h6>TV Shows<hr/></h6>

    <h6>Documentaries<hr/></h6>

    <h6>Favorites<hr/></h6>

    <h6>Collection<hr/></h6>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
夢(mèng)里花落0921

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

看哪！


const menulink = document.querySelectorAll('.menu h6')

let activeHr;

for(let item of menulink) {

  item.onclick = (event) => {

    if (activeHr) {

        activeHr.style.opacity = '0';

    }

    

    activeHr = event.currentTarget.querySelector('hr');

    activeHr.style.opacity = '1';

  } 

} 

hr {

opacity: 0;

}

<div class="menu">

    <h6>Home<hr/></h6>

    <h6>Movies<hr/></h6>

    <h6>TV Shows<hr/></h6>

    <h6>Documentaries<hr/></h6>

    <h6>Favorites<hr/></h6>

    <h6>Collection<hr/></h6>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
www說(shuō)

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

以上所有答案都試圖使您的代碼正常工作-而不是考慮最好的 html 和 CSS-不需要使用 hr-您只需要在元素上設(shè)置活動(dòng)類并讓 CSS 應(yīng)用邊框底部給它。


這樣標(biāo)題就不會(huì)在點(diǎn)擊時(shí)跳轉(zhuǎn)——我在每個(gè) h6 下添加了一個(gè)透明邊框，然后當(dāng)你點(diǎn)擊它時(shí)應(yīng)用活動(dòng)類，樣式只是為底部邊框著色。


您不應(yīng)出于樣式目的使用 html 元素 (hr/) - IMO。


我也不同意在這里使用 h6——這些 o 似乎不是標(biāo)題……但我把它留了下來(lái)，以防代碼比你顯示的更多——例如，如果它們是頁(yè)面下方的標(biāo)題——但是常規(guī)導(dǎo)航列表在這里似乎更合適。


感謝@Barmar 提供了我使用的代碼框架，我同意他使用活動(dòng)類的方法。請(qǐng)注意，我正在使用空檢查來(lái)刪除現(xiàn)有的活動(dòng)類 - 盡管可以通過(guò)簡(jiǎn)單地將第一個(gè)標(biāo)題從一開(kāi)始就設(shè)置為活動(dòng)來(lái)緩解這種情況。


const menuLinks = document.querySelectorAll('.menu h6')


for (let menuLink of menuLinks) {

  menuLink.onclick = () => {

    document.querySelector('.menu h6.active')?.classList.remove('active');

    menuLink.classList.add('active');

  }

}

.menu h6 {

  padding-bottom: 2px;

  border-bottom: solid 1px transparent;

  transition: all 0.2s ease-in-out

}



.menu h6.active {

  border-bottom-color: #000

}


.menu h6:hover {

  border-bottom-color: #000;

  transition: all 0.25s ease-in-out

}

<div class="menu">

  <h6>Home</h6>

  <h6>Movies</h6>

  <h6>TV Shows</h6>

  <h6>Documentaries</h6>

  <h6>Favorites</h6>

  <h6>Collection</h6>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
偶然的你

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

您可以在設(shè)置標(biāo)題標(biāo)簽樣式時(shí)使用懸停選項(xiàng)。在懸停中，您可以添加您選擇的顏色，這樣每當(dāng)您將鼠標(biāo)懸停在它上面時(shí)，顏色就會(huì)改變



查看完整回答
反對(duì) 回復(fù) 2023-01-06
?
九州編程

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

不要直接設(shè)置樣式，通過(guò) CSS 類的樣式來(lái)設(shè)置。然后你可以找到當(dāng)前有類的元素并刪除它，同時(shí)將類添加到新選擇的元素。


const menulink = document.querySelectorAll('.menu h6')

for (let item of menulink) {

  item.onclick = () => {

    let old = document.querySelector('.menu h6 hr.active');

    if (old) {

      old.classList.remove("active");

    }

    item.querySelector('hr').classList.add("active");

  }

}

.menu h6 hr.active {

  opacity: 1;

}


.menu h6 hr {

  opacity: 0;

}

<div class="menu">

  <h6>Home

    <hr/>

  </h6>

  <h6>Movies

    <hr/>

  </h6>

  <h6>TV Shows

    <hr/>

  </h6>

  <h6>Documentaries

    <hr/>

  </h6>

  <h6>Favorites

    <hr/>

  </h6>

  <h6>Collection

    <hr/>

  </h6>

</div>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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