Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I want to switch CSS of the page by clicking a button in asp.net, but somehow can't do that. My code as follows:

HTML:

<div>
    <h1>My Website</h1>
    <br/>
    <button>Night Mode</button>
    <button>Day Mode</button>
    </div>

Script:

<script>
        $(function () {
            $('button').click(function () {

               $('link').attr('href', 'Styles/night.css');
            });

        });
    </script>

Header:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <link  href="Styles/day.css" rel="stylesheet" type="text/css" />

I have 2 css files in Styles folder as day.css and night.css. The page is using day.css and should switch to night.css on clicking of any button.

If I put the .html file and both .css files in a folder, it actually works. But in Visual Studio (i.e aspx page), it's not happening. I tried other jQuery code like alert, it works fine. i can improve my code after that by using toggle etc.

share|improve this question

2 Answers 2

Got the answer from Dave Ward. All i had to do is include preventDefault() method. To ovveride the default behavior of form.

share|improve this answer

add an id attr to link and try to remove link then append new link to that

var newstyle = $("#style").clone().attr("link","newstyle.css");
$("#style").remove().after(newstyle);
share|improve this answer
    
i added an id to link as 'style' and modified code as follows: var newstyle = $("#style").clone().attr("link", "Styles/night.css"); $("#style").remove().after(newstyle); still didnt work sir. –  Muhammad Ramzan Feb 16 '12 at 13:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.