Question

我想在范围.active-class中显示有效标签的名称（文字）。示例：

<ul class="tabs">
<li class="feinleinen active"><a href="">feinleinen</a></li>
<li class="glatt"><a href="">glatt</a></li>
</ul > 

<span class="active-class">*Active_Tab_Name_Here (i.e. feinleinen) *</span>

Answer 1

您想要的是每次点击链接时都有点击事件并将文字放在那里？

<强>使用Javascript：

function changeSpan(var newText){
    document.getElementByClassName('active-class').innterHTML(newText);
}

当您需要初始化上述功能时。这可以在列表项中的锚点中完成。

<li><a href='#' onclick='changeSpan("new item name!");'>

不要忘记href中的哈希（＃）！这将以外行的方式停止默认操作。

使用 jQuery ，这可能会更简单

$('a','ul.tabs>li').click(function(){//a classname would be a better selector
    $('.active-class').appendTo($(this).innerHTML());//can also use $(this).text();
    return false;//also stops default action
});

Answer 2

小提琴：http://jsfiddle.net/x97g8sc7/

$(".active-class").text($(".tabs .active").text());

Answer 3

FIDDLE：

HTML 的

<ul class="tabs">
  <li class="feinleinen active"><a href="">feinleinen</a>

  </li>
  <li class="glatt"><a href="">glatt</a>

  </li>
</ul>

<span class="active-class">active tab name here</span>

SCRIPT

$('.active-class').text($('.tabs .active').find('a').text());

我想你想点击这个，所以在这里对我上面的代码进行位更新： -

$('.tabs a').click(function () {
  $('.tabs li').removeClass('active');
  $(this).parent('li').addClass('active');
  $('.active-class').text($(this).text()); 
});

在范围中显示活动选项卡的名称

3 个答案: