亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

即使在頁面刷新時也保持div中的背景顏色?

即使在頁面刷新時也保持div中的背景顏色?

慕容708150 2022-08-04 17:27:41
在單擊后,我將div的背景色更改為黃色,但是由于頁面刷新,顏色更改消失了。這是我使用的代碼:function selected(item) {    this.clear();    item.style.backgroundColor = 'yellow';}function clear() {    for(var i=0; i < divItems.length; i++) {        var item = divItems[i];        item.style.backgroundColor = 'white';    }}   </script> <h2>   <b>Seminare nach Standort filtern</b></h2> <div id="nav">    <div class="link" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div> </div> 我嘗試使用localStorage,但我不知道如何在這里應用它。也許像 這樣的東西,但僅憑這一點就不行了localStorage.setItem("item.style.backgroundColor", 'yellow');以下是完整代碼:<style>#sideNavBox {display:none}#contentBox {margin-left:0px}#nav {  display: flex;  flex-wrap: wrap;  flex: 1 1 0px}.link {  max-width: 150px;  padding: 3px;  margin: 10px;  border: 2px solid lime;  border-radius: 15px;  flex-basis: 100%;  text-align: center;  cursor: pointer;}.active {  background-color: lime}.dd13:hover { cursor: pointer; }.dd13 {color: #FFFFFF;Font: 12px Arialbackground-color:: #48A040;Padding: 3px 3px 3px 3px;}#pageStatusBar{    display:none!important;}</style><script>window.addEventListener("load", function() {  document.getElementById("nav").addEventListener("click", function(e) {    if (e.target.classList.contains("link")) {      location = e.target.getAttribute("data-link"); // or openLink(e.target.getAttribute("data-link"))    }  })})var divItems = document.getElementsByClassName("link");function selected(item) {    this.clear();    item.style.backgroundColor = 'yellow';}function clear() {    for(var i=0; i < divItems.length; i++) {        var item = divItems[i];        item.style.backgroundColor = 'white';    }}任何幫助是值得贊賞的。
查看完整描述

3 回答

?
呼如林

TA貢獻1798條經驗 獲得超3個贊

不幸的是,這就是頁面在刷新時應該執行的操作。頁面已清除。您需要將數據保存到數據庫中以保存信息。這就是你想要的例子嗎?


查看完整回答
反對 回復 2022-08-04
?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

正如@Djave所說,這里缺少的點是在您確實將所需項目保存到本地存儲之后,您應該在頁面加載時將其加載回去。


因此,為了在 中設置一個值,只需執行以下操作,每當觸發單擊事件時,您都應該將值保存到本地存儲中,如下所示:localstorage


function selected(item) {

  this.clear();

  item.style.backgroundColor = 'yellow';

  window.localStorage.setItem('backgroundColor', 'yellow');

}

然后,對于事件,您可以在加載窗口時加載它,就像這樣:onload


window.onload = function() {

  if (window.localStorage.getItem('backgroundColor')) {

    document.querySelector('.list').style.backgroundColor = window.localStorage.getItem('backgroundColor')

  }

}


查看完整回答
反對 回復 2022-08-04
?
慕森王

TA貢獻1777條經驗 獲得超3個贊

您必須在本地存儲中設置 Item,并在頁面加載時使用 localStorage.getItem() 檢查同一項。


以下是執行此操作的方法,請檢查代碼片段:



<style>


#sideNavBox {display:none}

#contentBox {margin-left:0px}

#nav {

  display: flex;

  flex-wrap: wrap;

  flex: 1 1 0px

}


.link {

  max-width: 150px;

  padding: 3px;

  margin: 10px;

  border: 2px solid lime;

  border-radius: 15px;

  flex-basis: 100%;

  text-align: center;

  cursor: pointer;

}


.active {

  background-color: lime

}


.dd13:hover { cursor: pointer; }


.dd13 {

color: #FFFFFF;

Font: 12px Arial

background-color:: #48A040;

Padding: 3px 3px 3px 3px;

}



#pageStatusBar{

    display:none!important;

}




</style><script>

window.addEventListener("load", function() {

  document.getElementById("nav").addEventListener("click", function(e) {

    if (e.target.classList.contains("link")) {

   //   location = e.target.getAttribute("data-link"); // or openLink(e.target.getAttribute("data-link"))

    }

  })

})


var divItems = document.getElementsByClassName("link");





function selected(item) {

   // this.clear();


    if( item.style.backgroundColor == 'yellow')

    {

        //means the item is selected already. So unset it.

        item.style.backgroundColor = 'white';

        localStorage.removeItem(item.id);

    }

    else

    {

        item.style.backgroundColor = 'yellow';


        console.log(item.id);

        localStorage.setItem(item.id, 'any value');


    }







    //localStorage.setItem("tempcolorvalue", "yellow");

}


function clear() {

    for(var i=0; i < divItems.length; i++) {

        var item = divItems[i];

        item.style.backgroundColor = 'white';

    }

}



</script>

<h2> 

   <b>Seminare nach Standort filtern</b></h2>

<div id="nav">

   <div class="link" id="firstlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Ulm" style="background-color: white;">Ulm</div>

   <div class="link" id="secondlink" onclick="selected(this)" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Taufkirchen" style="background-color: white;">Taufkirchen<br/></div>

   <div class="link" id="thirdlink"  onclick="selected(this)"  data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Oberkochen" style="background-color: white;">Oberkochen</div>

   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=K?ln" style="background-color: white;">K?ln</div>

   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Friedrichshafen" style="background-color: white;">Friedrichshafen</div>

   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Wetzlar" style="background-color: white;">Wetzlar</div>

   <div class="link" data-link="/internalseminars/SitePages/InternalSeminars.aspx?locations=Kiel" style="background-color: white;">Kiel<br/></div>

</div>

<div id="register"> 

   <p>To register yourself to a seminar please click on this icon 

      <a title="Book for me" class="book-for-me-button"></a>. To register someone else to a seminar, please click on this icon 

      <a title="Book for me" class="book-for-user-button"></a>.<br/></p> 

</div>



<script>

    if(localStorage.getItem("firstlink"))

    {

        document.getElementById('firstlink').style.backgroundColor = "yellow";

    }

    if(localStorage.getItem("secondlink"))

    {

        document.getElementById('secondlink').style.backgroundColor = "yellow";

    }

    if(localStorage.getItem("thirdlink"))

    {

        document.getElementById('thirdlink').style.backgroundColor = "yellow";

    }

</script>


查看完整回答
反對 回復 2022-08-04
  • 3 回答
  • 0 關注
  • 176 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號