使用jquery加载different css

using jquery load diffent css?

本文关键字：css different 加载 jquery 使用      更新时间：2023-09-26

我有两个按钮。现在我希望访问者单击按钮2，当单击按钮1时，站点调用style2.css。调用CCD_ 2。默认显示style.css有一种方法可以使用jquery更改css的链接路径。

<link rel="stylesheet" href="http://www.example.com/themes/style.css" type="text/css"/>

如果单击按钮2，则将行更改为<link rel="stylesheet" href="http://www.example.com/themes/style2.css" type="text/css"/>

或其他方式来获得效果。感谢

在button2的onclick处理程序中，执行以下操作：

$('link').attr('href', 'http://www.example.com/themes/style2.css');

编辑：显然，我需要指出的是，如果你有多个链接，这将影响所有链接标签，所以如果你有一个以上的链接，请使用id作为选择器，例如：

<link id="myLink".../>
$('#myLink).attr('href',...);

您可以让jQuery更改/向<body>元素添加一个类。这意味着您必须在一个样式表中拥有所有样式。

例如：

CSS：

.some-style        { color: #f00; }
.blue .some-style  { color: #00f; }
.green .some-style { color: #0f0; }

HTML:

<html>
<body>
    <p class="some-style">Some text</p>
    <button id="btn-1">Blue</button>
    <button id="btn-2">Green</button>
</body>
</html>

Javascript（简化用于示例）：

$('#btn-1').click(function() {
    $('body').addClass('blue');
});
$('#btn-2').click(function() {
    $('body').addClass('green');
});

尝试在php代码中设置一个条件，如下所示：

<?if(buttonOneClicked()){?>
<link rel="stylesheet" href="http://www.example.com/themes/style.css" type="text/css"/>
<?}else{?>
<link rel="stylesheet" href="http://www.example.com/themes/style2.css" type="text/css"/>
<?}?>

在这里写下这个基本想法非常好：

http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx

如果你发现你不能删除一个css文件，你可能需要用一个url变量重定向你的按钮，你的jquery可以读取并附加适当的css文件。

相关文章：