I am attempting to change the CSS of the page whenever a list is being clicked. However whenever I try and do so the browser just shows the CSS as text and doesn't actually use it for the page. Looked at a bunch of answers on here but cant get any to work.

```
<ul>
  <li><a href="character_sheet.php">Character</a></li>
  <li><a href="send_message.php">Send Message</a></li>
  <li><a href="view_messages.php">Messages</a></li>
  <li><a href="view_blog.php">View Blog</a></li>
  <li><a href="history.php">History</a></li>
  <li><a id="test" href="styles.css" rel="stylesheet" type="text/css">Dark Theme</a></li>
  <li><a id="test2" href="styles2.css" rel="stylesheet" type="text/css">Red Theme</a></li>
  <li><a id="test3" href="styles3.css" rel="stylesheet" type="text/css">Light Theme</a></li>
  <li><a href="index.php">Logout</a></li>
</ul>

<script>
$(document).ready(function() {
    $("#test").attr("href", "styles.css");
});​
$(document).ready(function() {
    $("#test2").attr("href", "styles2.css");
});​
$(document).ready(function() {
    $("#test3").attr("href", "styles3.css");
});​
</script>

```

EDIT:

I have tried doing what user neil said to do but whenever I implement the following I am unable to click on the list entries. The cursor does not change to the little hand with a finger you usually get hovering over links. Clicking does nothing.

```
<li><a class="test" data-src="styles.css">Dark Theme</a></li>
  <li><a class="test" data-src="styles2.css">Red Theme</a></li>
  <li><a class="test" data-src="styles3.css">Light Theme</a></li>
  <li><a href="index.php">Logout</a></li>
</ul>

<script>
$(document).ready(function(){
    $(".test").on('click', function(){
        $('head').append('<link rel="stylesheet" href="' + this.getAttribute('data-src') + '" type="text/css" />');
    });
});
</script>

```

EDIT2:
I have implemented another users solution which still doesnt work on mine. If you are going to downvote my post please tell me why atleast, I would really like to fix this. My new code:

```
<!DOCTYPE html>
<html>
<head>
  <link href="styles.css" rel="stylesheet">
</head>
<body>

<div id="header">
<h1>D20-TABLEKEEPER</h1>
<form action="blurb.php">
    <input type="submit" value="BLURB" size="21">
</form>
</div>

<ul>
  <li><a href="character_sheet.php">Character</a></li>
  <li><a href="send_message.php">Send Message</a></li>
  <li><a href="view_messages.php">Messages</a></li>
  <li><a href="view_blog.php">View Blog</a></li>
  <li><a href="history.php">History</a></li>
  <li><a href="#" class="changeStyles" data-src="styles.css">Dark Theme</a></li>
  <li><a href="#" class="changeStyles2" data-src="styles2.css">Red Theme</a></li>
  <li><a href="#" class="changeStyles3" data-src="styles3.css">Light Theme</a></li>
  <li><a href="index.php">Logout</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
        $(document).ready(function(){
                $(".changeStyle").click(function(){
                        var style = $(".changeStyles").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
                $(".changeStyle1").click(function(){
                        var style = $(".changeStyles2").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
                $(".changeStyle1").click(function(){
                        var style = $(".changeStyles3").attr('data-src');
                        $('head').append('<link href="'+ style +'" rel="stylesheet">');
                });
        });
</script>

```