Replacing Text Of One Tag With Another

I have a menu here:

Back

• Something

Solution 1:

There are number of working examples for your context in SO. Its very simple in jquery and you asking very hard. Please look through API Jquery

$("ul li a").click(function(e) {
    e.preventDefault();
    $('header').text($(this).text());
});

Fiddle

for your second question "I have a back button, how do I revert the previous link back to what it was? "

var temp = '';

$("ul li a").click(function(e) {
     e.preventDefault();
     temp = $('header').text();
     $('header').data('value', temp);
     $('header').text($(this).text());
    });

$(".back").click(function(e) {
    e.preventDefault();
    var val = $('header').data('value');
    $('header').text(val);
});

Fiddle2

Solution 2:

try this:-

$('ul li a').click(function(){
  $('header').html($(this).text());
});

Demo

Solution 3:

$("ul > li > a").click(function(e) {
    var element = document.getElementById("header");
    element.innerHTML = $(this).text();
});

You can try something like this to modify the header text whenever a link is clicked.

Solution 4:

I have set up a fiddle with the following (also takes care of the back button): https://jsfiddle.net/0dLy3xwq/2/

HTML:

<headerid="linkLabel"></header><ahref="#"id="backButton">Back</a><ulid="navigationList"><li><ahref="#">Something</a></li><li><ahref="#">Something1</a></li><li><ahref="#">Something2</a></li><li><ahref="#">Something3</a></li></ul>

And the JavaScript:

(function ($) {
    var navStack = [];

    $('#navigationList a').click(function (event) {
        var el = $(event.target),
            label = el.text();

        if (navStack[navStack.length - 1] !== label) {
            navStack.push(label);
            updateView();
        }
    });

    $('#backButton').click(function () {
        navStack.pop();
        updateView();
    });

    functionupdateView() {
        $('#linkLabel').text(navStack[navStack.length - 1] || '');   
    }
}(jQuery));

For the back button just use a simple stack to keep track of where the user has been. If you have a forward button then create another stack that pushes the popped label when back is clicked.

Share