jquery - 网站主题颜色不变

Question

我想更改网站主题颜色，但我正在使用这种方式，但它无法正常工作。谁能帮忙？

<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();
 });

引用屏幕

Answer 1

试试这段代码。

$(".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>