Change URL depending on click

Question

I want to add a language switcher to a specific html page. I don't need any language text only the link to another site will need to be changed depending on the click. It wouldn't make much sense here to create three html pages just to deal with some link change but my jquery skills are not that great.

The destination structure looks like this:

<ul>
<li><a  class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
<li><a  class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
<li><a  class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>

<ul>

<ul>
<li><a  class="clickButton" href="folder1/firstLink/Languages/Spanish/folder/index.html">Index Link</a></li>
...
<ul>

As you can see I would only need to replace the language name ("English") with Spanish in order to make the link work. So I was thinking that the user clicks on the according flag and the url string changes accordingly.

I would be happy about some example how to switch the language name

VisioN · Accepted Answer · 2012-10-15 12:17:05Z

1

HTML:

<a data-lang="Spanish">To Spanish</a>
<a data-lang="Russian">To Russian</a>

JavaScript:

var current = "English"
$("[data-lang]").on("click", function() {
    var lang = $(this).data("lang");
    $(".clickButton").prop("href", function(i, href) {
        return href.replace(current, lang);
    });
    current = lang;
});

DEMO: http://jsfiddle.net/a2xqL/

answered Oct 15, 2012 at 12:17

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman · Accepted Answer · 2012-10-15 12:19:42Z

1

make it easy for yourself: add custom data attribute to links;

<a data-lang="English" href="">

Than access it with jQuery by $link.data('lang'); and add it to the href.

answered Oct 15, 2012 at 12:19

Roman

5044 silver badges10 bronze badges

Collectives™ on Stack Overflow

Change URL depending on click

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related