CODEWITHSUNDEEP
javascriptjquery
Keith
Keith

Reputation: 4147

Replacing text of one tag with another

I have a menu here:

<header></header>
<a class="back">Back</a>
<ul>
   <li>
      <a href="#">Something</a>
   </li>
   <li>
      <a href="#">Something1</a>
   </li>
   <li>
      <a href="#">Something2</a>
   </li>
   <li>
      <a href="#">Something3</a>
   </li>
</ul>

When a user clicks on a link within the menu, how do I get whatever link they clicked to show up within the header tag? So if a user picks the second link, Something2, I want whatever the text is between the a tag, in this case Something2, to show up between the header tag.

Upvotes: 0

Views: 58

Answers (4)

Ben March
Ben March

Reputation: 566

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

HTML:

<header id="linkLabel"></header>
<a href="#" id="backButton">Back</a>
<ul id="navigationList">
    <li>
       <a href="#">Something</a>
    </li>
   <li>
       <a href="#">Something1</a>
   </li>
   <li>
       <a href="#">Something2</a>
   </li>
   <li>
       <a href="#">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();
    });

    function updateView() {
        $('#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.

Upvotes: 1

Sudharsan S
Sudharsan S

Reputation: 15393

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

Upvotes: 2

Umesh Sehta
Umesh Sehta

Reputation: 10683

try this:-

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

Demo

Upvotes: 1

Hano Johannes Rossouw
Hano Johannes Rossouw

Reputation: 770

$("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.

Upvotes: 1

Related Questions