Question

我正在制作一家餐厅WP Woocommerce网站，用于送货或取货。有没有办法在网站着陆页上放置一个按钮来决定在整个网站范围内使用哪种样式表; style-sheet-1，添加到购物车按钮或样式表2，display-none添加到购物车按钮？

-Chad

Answer 1

您需要创建多个样式表，每个样式表对应您希望主题具有的每种颜色/样式。然后，您可以使用不同的颜色选项在主题上创建设置菜单。当用户选择一个选项时，它将选择可以注入到主题中的特定样式表。使用jquery。

因此，例如，正常的样式表将链接如下：

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
...

然后，您可以使用jquery在单击设置按钮时应用不同的样式表，如下所示：

    $(document).ready(function () {
    $("settingButton").click(function () {
        $('head').append('<link rel="stylesheet" href="newstylesheet.css" type="text/css" />');
    });
});

这会在头部添加一个新的CSS Styesheet。

Alternativley你可以一起替换旧样式表，删除它的链接并用新的样式替换它：

$(document).ready(function () {
        $("settingButton").click(function () {
            $('head > link').filter(':first').replaceWith('<link href="newstylesheet.css" ');
        });
    });

我希望这会有所帮助：）

按钮，用于选择要使用的样式表

1 个答案: