用另一個標簽替換一個標簽的文本

Question

我在這里有一個菜單：

<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>

當用戶單擊菜單中的鏈接時，如何獲得他們單擊以顯示在標題標簽中的任何鏈接？ 因此，如果用戶選擇第二個鏈接Something2，則我希望標簽之間的任何文本（在本例中為Something2）都顯示在標頭標簽之間。

Answer 1

嘗試這個：-

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

演示版

Answer 2

在SO中有許多適用於您的上下文的工作示例。 它在jQuery中非常簡單，您很難問。 請通過API Jquery查看

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

小提琴

對於第二個問題， “我有一個后退按鈕，如何將先前的鏈接恢復為原來的鏈接？”

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);
});

小提琴2

Answer 3

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

每當單擊鏈接時，您都可以嘗試使用類似的方法來修改標題文本。

Answer 4

我已經用以下內容設置了一個小提琴（也照顧了后退按鈕）： 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>

和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));

對於后退按鈕，只需使用簡單的堆棧即可跟蹤用戶的位置。 如果您有前進按鈕，則創建另一個堆棧，當單擊后退按鈕時，該堆棧會推動彈出的標簽。