Cara untuk menyimpan item yang dipilih dalam menu bar sisi di atas selepas muat semula halaman

Question

Saya mempunyai menu bar sisi menatal. Jadi apabila saya memilih item menu ia sepatutnya muncul di kedudukan atas bar sisi. Tiada masalah menyediakan menu aktif. Saya faham. Tetapi saya tidak boleh menetapkan kedudukan teratas bar sisi. Sila jangan mengesyorkan jQuery. Sebaliknya saya dinasihatkan untuk menggunakan JavaScript biasa Berikut adalah beberapa rujukan kod

.sidebar{
    height:100px
    overflow-y:scroll;
}
.sidebar ul li{
    padding:30px;
}

<!-- CSS -->

 <!-- html  -->
<div class="sidebar">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>........
    <li>item100</li>
  </ul>
</div>

Answer 1

Penyelesaian CSS tulen menggunakan :target 伪类、flexbox 布局以及 order sifat.

.sidebar {
  background-color: #ddd;
  height: 200px;
  overflow-y: scroll;
}
.sidebar ul {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.sidebar li {
  padding: 1em;
  order: 1;
}
.sidebar :target {
  background-color: #aaa;
  order: 0;
}

  

    
item1
    
item2
    
item3
    
item4
    
item5
    
item7
    
item8
    
item9
    
item100