本地存储没有切换视图，也没有在控制台中产生错误

Question

不知道为什么这不起作用，可能需要一些帮助。如果单击“时事通讯”、“新闻”或“公共通知”，布局将发生更改，以显示正确的视图并存储在本地存储中。

现在，当您单击上述3项中的一项时，不会发生任何事情--它不会更改布局视图，也不会将数据存储在本地存储中.

任何帮助都是非常感谢的。

JS:

$(document).ready(function(){
    // Changing layout to 'newsletters'
    $('.news_nav-for_nckcn ul li:nth-of-type(1)').on('click', function () {
        changeToNewslettersView();
    });

    // Changing layout to 'news'
    $('.news_nav-for_nckcn ul li:nth-of-type(2)').on('click', function () {
        changeToNewsView();
    });

    $('.news_nav-for_nckcn ul li:nth-of-type(3)').on('click', function () {
        changeToPublicAnnouncementsView();
    });

    if (typeof(Storage) !== "undefined") {
        var view = localStorage.getItem("view");
        if (view && view == "newsletters") {
            changeToNewslettersView();
        } else if (view && view == "news") {
            changeToNewsView();
        } else if (view && view == "publicAnnouncements") {
            changeToPublicAnnouncementsView();
        } else {
            // view isn't set, or is set to something we don't recognize
        }
    } else {
        // user's browser doesn't support localStorage
    }        
});
// Changing layout 'news' & 'publicAnnouncements' to 'newsletters'
function changeToNewslettersView() {
    var news=document.getElementById('hideClass');
    news.style.display="none";

    var publicAnnouncements=document.getElementById('hideClass');
    publicAnnouncements.style.display="none";

    var newsletters=document.getElementById('showClass');
    newsletters.style.display="block";

    storagePut("newsletters");

    $('.news_nav-for_nckcn ul li:nth-of-type(1)').addClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(2)').removeClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(3)').removeClass('active');
}
// Changing layout 'newsletters' & 'publicAnnouncements' to 'news'
function changeToNewsView() {
    var newsletters=document.getElementById('hideClass');
    newsletters.style.display="none";

    var publicAnnouncements=document.getElementById('hideClass');
    publicAnnouncements.style.display="none";

    var news=document.getElementById('showClass');
    news.style.display="block";

    storagePut("news");

    $('.news_nav-for_nckcn ul li:nth-of-type(2)').addClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(1)').removeClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(3)').removeClass('active');
}
// Changing layout 'newsletters' & 'news' to 'publicAnnouncements'
function changeToPublicAnnouncementsView() {
    var newsletters=document.getElementById('hideClass');
    newsletters.style.display="none";

    var news=document.getElementById('hideClass');
    news.style.display="none";

    var publicAnnouncements=document.getElementById('showClass');
    publicAnnouncements.style.display="block";

    storagePut("publicAnnouncements");

    $('.news_nav-for_nckcn ul li:nth-of-type(3)').addClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(1)').removeClass('active');
    $('.news_nav-for_nckcn ul li:nth-of-type(2)').removeClass('active');
}
function storagePut(view) {
    if (typeof(Storage) !== "undefined") {
        localStorage.setItem("view", view);
    } else {
        // user's browser doesn't support localStorage
    }        
}

演示

Answer 1

问题在于，您正在尝试获取id "hideClass“的元素。

从您的演示中，我们可以看到：

    <div id="2017-newsletters hideClass" class="nckcn_news_container-wrapper_newsletters">

正如您可以看到的这里，每个元素只能有一个id：

在XML中，片段标识符的类型为ID，每个元素只能有一个ID类型的属性。因此，在XHTML1.0中，ID属性被定义为id类型，为了确保XHTML1.0文档是结构良好的XML文档，XHTML1.0文档在对上面列出的元素定义片段标识符时必须使用id属性。有关确保这样的锚在以媒体类型text/html形式提供XHTML文档时向后兼容的信息，请参见HTML兼容性准则。

操作html选项卡的通常方法是将类添加到隐藏元素中(但如果更适合您，也可以在可见元素上添加类)，然后按类而不是id获取元素。

Answer 2

实际上，news和相应的变量正在计算到null，因此news.style给出了空错误并终止了脚本执行。我试过修复演示。它现在正在改变选项卡以及设置localStorage。

见JsFiddle演示