Question

我使用LESS，并为不同颜色设置了几个变量：

@LightBlue: #0088CC;
@DarkPink: #C71C77;
@LightGreen: #76B51B;

@DefaultThemeColor: @LightBlue;

另外，我有颜色链接，所以当用户点击每个链接时，主题颜色会发生变化。

<ul>
    <li class="light-blue"><a href="#"> light blue </a></li>
    <li class="light-green"><a href="#"> light green </a></li>
    <li class="dark-pink"><a href=""> dark pink </a></li>
</ul>

有没有人知道我如何用LESS和jquery做到这一点？

Answer 1

您可以为每个主题制作单独的CSS文件。然后代码可以这样：

http://jsfiddle.net/ZjgE2/1/＆lt; - 演示

<强> HTML

<ul>
    <li class="light-blue"><a href="#"> light blue </a></li>
    <li class="light-green"><a href="#"> light green </a></li>
    <li class="dark-pink"><a href="#"> dark pink </a></li>
</ul>

<强>的jQuery

    $('ul li').click(function(e){
        e.preventDefault();
        // Files named the same as the class
        var cssFile = $(this).attr('class'); 
        // Remove all theme styles
        $('head link[href="/styles/light-blue.css"], head link[href="/styles/styles/light-green.css"], head link[href="/styles/styles/dark-pink.css"]').remove();
        // Apply the clicked style
        $("<link/>", { 
           rel: "stylesheet",
           type: "text/css",
            href: "/styles/" + cssFile + ".css"
        }).appendTo("head");
    });

我希望这有帮助！

如何通过点击链接更改LESS和jquery的主题颜色？

1 个答案: