javascript - 如何使用 jQuery 在特定 CSS 文件之间切换？

Question

为了切换主题，我使用下面的脚本来放置 cookie 并选择特定的 CSS 文件。

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

结合这些链接:

<ul id="layout" class="PanelInfo">
    <li><a href="#" rel="/themes/bootstrap/design/style.css">Default style</a></li>
    <li><a href="#" rel="/themes/bootstrap/design/custom_bootstrap.css">Bootstrap</a></li>
    <li><a href="#" rel="/themes/bootstrap/design/custom_cerulean.css">Cerulean</a></li>
    <li><a href="#" rel="/themes/bootstrap/design/custom_cosmo.css">Cosmo</a></li>
</ul>

问题是它只加载一个 CSS 文件。它应该只在几个 CSS 文件中切换，比方说: style.css、custom_bootstrap.css、custom_cerulean.css 和 custom_cosmo.css

不应更改所有其他 CSS 文件。现在的情况是它禁用了所有其他 CSS 文件。 如何使用我的脚本实现此目的？

Answer 1

这个问题并不完全清楚，但我猜你有几个

`<link href="....`

页面上的元素？其中包含您要切换值的值，以及其他一些不应该更改的值？

如果是这样，那么我认为你的问题是你的 jQuery 选择器选择了页面上的所有“链接”元素，并将所有这些元素中的 URL 修改为相同的内容:

$("link").attr("href",$(this).attr('rel'));

相反，您需要选择要更改的链接的特定 ID，如下所示:

$("#SwitchLink").attr("href",$(this).attr('rel'));

其中 SwitchLink 是特定的 ID <link>元素