0

我正在使用 JavaScript 为不同类型的可访问选项选择不同的 CSS 样式，例如。白色文本上的黑色，更大的文本。我遇到的问题是，当您更改 CSS 工作表时，它使用先前选择的工作表中的元素。您可以通过查看此处的网站更清楚地了解我的意思（在 IE 中无法正确显示）。如果您单击不同的 [Aa] 选项，您可以更改样式。我正在使用此代码（JavaScript）执行此操作：

if ($.cookie("css")) {
    $("link").attr("href", $.cookie("css"));
}
$(document).ready(function() {
    $("#accessibility a").click(function() {
        $("link").attr("href", $(this).attr('rel'));
        $.cookie("css", $(this).attr('rel'), {
            expires: 365,
            path: '/'
        });
        return false;
    });
});​

和 HTML：

<a href="#" rel="index.css"><img src="images/bonw.png"></a>
<a href="#" rel="index_wonb.css"><img src="images/wonb.png"></a>
<a href="#" rel="index_+.css"><img src="images/+.png"></a>

我不知道它为什么这样做，任何帮助都会很棒！

4

3 回答 3

0

查看 jQuery toggleClass() http://api.jquery.com/toggleClass/ 它可以减少代码数量并使其更清晰。

  $body.toggleClass('red');
  $body.toggleClass('blue');
于 2012-04-16T14:08:31.273 回答
0

您可以在一个页面上使用多个 css 工作表，您添加一个 css 页面而不是选择一个新页面。尝试使用新的 CSS 重新加载页面。

于 2012-04-16T12:55:19.887 回答
0

你可以做“body ids”

您将一个类或一个 id 附加到正文以告诉页面您想要什么类型的样式。然后在你的css中，为该表中的每个选择器添加body.[class]或body#[id]，以对应于它的样式。

在此示例中，我只需通过更改正文中的类即可在两种样式之间切换文本。

HTML

<!--initial style red-->
<body class="red">
    <div>click anywhere to toggle styles</div>​
</body>

CSS

/*on one sheet, you can define the page's CSS when the body is red*/
body.red div{
    color:red;
}

/*on another sheet, different when the body is blue*/
body.blue div{
    color:blue;
}​

JS

$(function() {

    var $body = $('body');

    $body.on('click', function() {

        //we toggle the body class, effectively toggling between sheets
        if ($body.hasClass('red')) {
            $body.removeClass('red');
            $body.addClass('blue');
        } else {
            $body.addClass('red');
            $body.removeClass('blue');
        }

    });

});​
于 2012-04-16T13:29:47.277 回答