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

Demo

Answer 2

在SO中有许多适用于您的上下文的工作示例。它在jquery中非常简单，你要求非常努力。请仔细阅读API Jquery

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

Fiddle

第二个问题＆＃34;我有一个后退按钮，如何将之前的链接恢复为原来的状态？＆＃34;

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

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

对于后退按钮，只需使用一个简单的堆栈来跟踪用户的位置。如果你有一个前进按钮，那么创建另一个堆栈，在单击后退时推送弹出的标签。

用另一个

4 个答案: