Question

I am trying to create a style switcher. What I would like to do is to have some boxes on my page for each color. Something like the following:

<table>
<tr>
<td><a href="#" Title="Style A" onclick="javascript:changeStyle("/Content/Themes-jQuery/humanity/jquery-ui-1.8.17.custom.css")>A</td>
<td><a href="#" Title="Style B" onclick="javascript:changeStyle("/Content/Themes-jQuery/vader/jquery-ui-1.8.17.custom.css")>B</td>
</tr>
</table>

Then within the function I would like to do this:

$("link[title='jquery-ui-theme']").attr("href", xxx  );

Where xxx is the argument passed to the function.

Can someone give me some advice on how I can call the function from inside the <a> link and what the definition of the function would need to look like.

Also is there a better way that I could do this using more jQuery? Would it be better to use DIVs instead of table/rows?

Answer 1

Yes, there is a better way you could do it. For example, you could use this markup:

<ul class="style-switcher">
    <li><a href="#" data-style="humanity">Humanity</a></li>
    <li><a href="#" data-style="vader">Vader</a></li>
</ul>

And this JavaScript:

$(".style-switcher").on('click', 'a', function(e) {
    var style = $(this).attr('data-style');
    changeStyle('/Content/Themes-jQuery/' + style + '/jquery-ui-1.8.17.custom.css');
    e.preventDefault();
});

To make it look the same, you could use this CSS:

.style-switcher {
    overflow: auto;
    margin: 0;
    padding: 0;
}
.style-switcher > li {
    float: left;
    list-style-type: none;
    width: 10em; /* You should probably adjust this. */
}
.style-switcher > li > a {
    display: block;
    width: 10em; /* You should probably adjust this. */
}

Try it on JSFiddle.

What could make it even better is to change the href to some location that would make style switching work for users with scripts disabled.