jquery - 网站主题颜色不变

我想更改网站主题颜色，并且我正在使用这种方式无法正常工作。有人可以帮忙吗？

<a href="javascript:void(0)" id="switch" class="gray-color">&nbsp;</a>
<a href="javascript:void(0)" id="switch2" class="green-color">&nbsp;</a>
<a href="javascript:void(0)" id="switch3" class="yellow-color">&nbsp;</a>

$("#switch").click(function () {
               $('head').append('<link rel="stylesheet" href="css/theme-gray.css"  title="gray" class="gray" />');
               $('link[title="yellow"]').remove();
           });
$("#switch3").click(function () {
               $('head').append('<link rel="stylesheet" href="css/theme-yellow.css"  title="yellow" class="yellow" />');
               $('link[title="gray"]').remove();
           });
$("#switch2").click(function () {
               $('link[title="yellow"]').remove();
               $('link[title="gray"]').remove();
 });

参考屏幕

最佳答案

试用此代码。

$(".theme-link").click(function () {
    console.log($(this).attr("data-theme"));

    $('#theme').attr("href", $(this).attr("data-theme") );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" id="theme" href="css/theme-gray.css"  title="gray" class="gray" />

<a href="javascript:void(0)" data-theme="css/theme-gray.css" class="theme-link">gary</a>
<a href="javascript:void(0)" data-theme="css/theme-green.css" class="theme-link">green</a>
<a href="javascript:void(0)" data-theme="css/theme-yellow.css" class="theme-link">yellow</a>

关于jquery - 网站主题颜色不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50367682/