我需要在单击页面中的链接时切换样式表，以便页面以不同的颜色主题显示

Question

HTML HTML

<head>
    <style type="text/css>
        @import url("style.css")  //my main css file
    </style>
    // css file which contains only color properties.
    <link href="theme_blue.css" rel="stylesheet"> 
</head>

<body>
    <a href="#" id="theme-blue">Click Here to switch color</a> 
</body>

CSS (theme_blue.css) CSS（theme_blue.css）

body
{
    background-color:#66ccff;
}

JS JS

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
        $("link").attr("href", "theme_blue.css");
        return false;
    });
});

My problem is, when I click the link, the entire structure of the web page is lost and no color changes happen. 我的问题是，当我单击链接时，网页的整个结构都丢失了，并且没有发生颜色变化。 I am very new to this technology and need some help from experts. 我对这项技术非常陌生，需要专家的帮助。 Kindly suggest me solutions to overcome this problem. 请给我建议解决这个问题的解决方案。

Answer 1

Your problem is with your jQuery selector. 您的问题出在jQuery选择器上。 You are applying the attribute href to all link elements including your main css link. 您正在将href属性应用于所有链接元素，包括主CSS链接。 I suggest you give your link and id then update your selector: 我建议您提供链接和ID，然后更新选择器：

html html

<head>
    <style type="text/css>
        @import url("style.css")  //my main css file
    </style>
    // css file which contains only color properties.
    <link id="css_theme_blue" href="theme_blue.css" rel="stylesheet"> 
</head>

<body>
    <a href="#" id="theme-blue">Click Here to switch color</a> 
</body>

jQuery jQuery的

$(document).ready(function() { 
    $("#theme-blue").click(function() { 
        $("#css_theme_blue").attr("href", "theme_blue.css");
        return false;
    });
});

Might I offer another solution that I practice. 我可能会提供我练习的另一种解决方案。

I have my style sheets but I change the body class to reflect what I want a particular element to look like. 我有样式表，但更改了body类以反映我希望特定元素的外观。

body.blue_theme #element_1 {
background:blue;
}

body.green_theme #element_2 {
background: green;
}

then I swap out the body class when I want themes to change: 然后当我希望更改主题时，我换了肢体课：

$('#blue-theme-button').on('click', function() {
$(body).removeClass('green_theme').addClass('blue_theme');
}

This method is preferable to me because all styles are loaded at the beginning and there won't be a pause on slower machine when a new stylesheet is loaded. 这种方法对我来说更可取，因为所有样式都在开始时加载，并且在加载新样式表时，在较慢的计算机上不会暂停。

Answer 2

Lets say you have a two css files in /Content folder. 假设您在/ Content文件夹中有两个CSS文件。

main-theme.css : main-theme.css：

body {
   background-color:#fff;
}

blue-theme.css : blue-theme.css：

body {
   background-color: blue;
}

you have a page which uses by default main-theme.css and link element has id #siteTheme, also you have clickable element with id #blueTheme 您有一个默认情况下使用main-theme.css的页面，链接元素的ID为#siteTheme，并且您的点击元素的ID为#blueTheme

<link id="siteTheme" href="/Content/main-theme.css" rel="stylesheet" type="text/css" />
<a href="#" id="blueTheme">Activate Blue Theme</a>

all you need is to write function for #blueTheme click, which changes href attribute value of link element with id #siteTheme: 您只需要编写#blueTheme点击的函数，即可更改ID为#siteTheme的链接元素的href属性值：

<script>
            $(document).ready(function () {
                $("#blueTheme").click(function () {
                    $("#siteTheme").attr("href","/Content/blue-theme.css");
                });
            })
</script>

i hope this will help ;) and don't forget to load jquery before writing those scripts. 我希望这会有所帮助；）并且不要忘记在编写这些脚本之前加载jquery。

<script src="/Scripts/jquery-1.10.2.min.js"></script>

我需要在单击页面中的链接时切换样式表，以便页面以不同的颜色主题显示

问题描述

2 个解决方案

解决方案1
0 2014-09-23 10:12:07

解决方案2
0 2014-09-23 14:13:53

我需要在单击页面中的链接时切换样式表，以便页面以不同的颜色主题显示

问题描述

2 个解决方案

解决方案1 0 2014-09-23 10:12:07

解决方案2 0 2014-09-23 14:13:53

解决方案1
0 2014-09-23 10:12:07

解决方案2
0 2014-09-23 14:13:53