基于所选样式表在页面之间导航时切换链接文本

Question

我已经在我的网站上安装了一个脚本，允许低对比度设置和高对比度设置，因为我的网站将被视障人士使用。这个脚本运行得很完美。唯一的问题是当访问者访问站点的多个页面时。

当您第一次访问该站点时，低对比度设置在默认情况下有效，并且只显示指向高对比度设置的链接。如果你随后访问网站的其他页面，低对比度设置在默认情况下生效，只显示高对比度链接(这是完美的，也是应该的)。该网站通过使用cookie来做到这一点。

这是问题所在。如果您单击高对比度链接以查看高对比度设置的页面，然后转到另一个页面，另一个页面将以高对比度设置显示(正如它应该出现的那样)，但出现的不是指向低对比度设置的链接(我希望出现这种情况)，而是指向高对比度设置的链接(鉴于页面已经处于高对比度设置，这没有任何意义)。

我的网站还没有完成，但我在http://www.14kt.eu/上发布了几个页面，这样你就可以看到我在说什么。这个站点的一些成员非常友好地帮助我编写代码/脚本，有一段时间一切都很完美，但后来它就停止了工作。我怀疑我在html的其余部分中更改了导致这一问题的某些东西。对这个问题相当困惑。

如果有人能告诉我如何解决这个问题，我将不胜感激。

谢谢你抽出时间来，克里斯

Answer 1

看起来您只需要根据cookie有条件地隐藏样式表按钮。

您可以使用以下代码(更新后的)来完成此操作：

function setStylesheetFromCookie() {
    var stylesheet = readCookie('mysheet') || 'none';
    if( stylesheet == 'highcontrast' ) {
        console.log('high');
        document.getElementById('Lc').style.display = 'block';
        document.getElementById('Hc').style.display = 'none';
    } else {
        console.log('low');
        document.getElementById('Hc').style.display = 'block';
        document.getElementById('Lc').style.display = 'none';
    }
}

将该代码添加到script_1.js中的某个位置。

为了让它工作，它需要在窗口加载时运行。这就引出了第二个问题。脚本1中有两个不同的window.onload赋值。您需要合并这两个赋值。删除该行

window.onload = FixRows;

并修改第二个window.onload = function()，使其如下所示：

window.onload = function() {
    var el = document.getElementById('mydiv');
    var size = readCookie('fontsize');
    if(size) {
        doChangeSize(el, size);
    }
    var original = readCookie('originalsize');
    if(original) {
        el.originalSize = original;
    }

    FixRows(); //You are adding this line
    setStylesheetFromCookie(); //and adding this line to the end of the function
}

注意末尾的两个新函数调用。这应该可以解决您的问题。

干杯!

Answer 2

只是随便看看，就好像你同时让javascript在几个不同的方向上运行。window.onload分别绑定到两个不同的函数。第一个函数调用FixRows，它可以适当地显示“低对比度”/“高对比度”(来自您设置的cookie )。我认为第二个window.onload正在覆盖第一个。

我不认为这会直接影响你的代码，但是你在styleswitcher.js中有setCookie()，在script_1.js中有createCookie() --他们在做同样的事情。我要说的是，你至少应该把你的cookie函数整合到一个或另一个库中，以减少混淆。

希望我能帮上忙。