Question

在html创建标签时，我可以设置巴黎标签处于活动状态（用html硬编码＆＃34; style =＆＃34; display：block;＆＃34;）。因此，当加载页面时，将显示活动选项卡（巴黎）。

问题

当我点击不同的标签（伦敦）并点击刷新时，它再次显示巴黎。如何点击刷新并向我显示当前活动的选项卡的信息？而不是让我回到定义的选项卡。也许javascript或jquery可以解决我的问题？

<!DOCTYPE html>
    <html>
    <head>
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>

    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent" style="display: block;>
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    <script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    </script>

    </body>
    </html>

Plunker View

示例图片

目前在伦敦，如果我点击刷新，它应该显示伦敦的详细信息。如果它是巴黎或东京也应该有效。

Answer 1

您可以使用Cookie存储当前标签值，并在页面加载时检索它。如果没有找到cookie，它将选择默认选项卡。

您可以将此lib用于cookie或使用javascript默认函数。

https://github.com/js-cookie/js-cookie

<script>
document.addEventListener("DOMContentLoaded", function(){
   var activeCity = Cookies.get('city');
   if (activeCity){
     document.getElementById(activeCity).click();
   }
});

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    Cookies.set('city', cityName, { expires: 7 }); //added new line
}
</script>

Answer 2

这是您发布的修改过的plunker：

// your code

    // After you have your tab selected save it to a cookie (change expiration to something that makes sense to you.
    document.cookie = "cityName="+cityName+"; expires=Thu, 18 Dec 2090 12:00:00 UTC; path=/";
}


document.addEventListener("DOMContentLoaded", function(){
  // When  you load the page check if the cookie is there and read it back
  var selectedCity = getCookie("cityName");
  // if there is a selected city then select it. Notice that I added id's to each link with the city name.
  if (selectedCity != ""){
    document.getElementById(selectedCity).click();
  }
});
// Helper function to get the cookie value from the document.cookie string.
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

https://plnkr.co/edit/sCRfBsFRgdQ0wPKI9CMb?p=preview

希望它有所帮助！

刷新html页面时如何保持当前选项卡？

2 个答案: