Question

首先感谢大家的帮助。对不起我的英语很糟糕:)）

我需要jquery，可以在h1中选择并显示选项卡的名称。选定的标签更改，h1转换。

前，我有：

  <div class="header-inner">
      <div class="cal-menu-na">
        <h1>Text Here</h1>
      </div>
    </div>
    <div class="navbar">
      <span class="sone active"><a href="javascript:void(0);" data-tab="one">One ABC</a></span>
      <span class="stwo"><a href="javascript:void(0);" data-tab="two">Two XYZ</a></span>
      <span class="sthree"><a href="javascript:void(0);" data-tab="three">Three QWE</a></span>
      <span class="sfour"><a href="javascript:void(0);" data-tab="four">Four FGH</a></span>
    </div>

    <div class="main-contain">
      <div class="tabContainer">
        <div id="one" class="Tabcondent active">Tab One</div>
        <div id="two" class="Tabcondent">Tab Two</div>
        <div id="three" class="Tabcondent">Tab Three</div>
        <div id="four" class="Tabcondent">Tab Four</div>
      </div>
    </div>

我想要：

  <div class="header-inner">
      <div class="cal-menu-na">
        <h1>One ABC ( or Two XYZ or Three QWE or Four FGH )</h1>
      </div>
    </div>
    <div class="navbar">
      <span class="sone active"><a href="javascript:void(0);" data-tab="one">One ABC</a></span>
      <span class="stwo"><a href="javascript:void(0);" data-tab="two">Two XYZ</a></span>
      <span class="sthree"><a href="javascript:void(0);" data-tab="three">Three QWE</a></span>
      <span class="sfour"><a href="javascript:void(0);" data-tab="four">Four FGH</a></span>
    </div>

    <div class="main-contain">
      <div class="tabContainer">
        <div id="one" class="Tabcondent active">Tab One</div>
        <div id="two" class="Tabcondent">Tab Two</div>
        <div id="three" class="Tabcondent">Tab Three</div>
        <div id="four" class="Tabcondent">Tab Four</div>
      </div>
    </div>

完整演示：https://jsfiddle.net/zh8rqnkd/

Answer 1

使用它将点击的标签text设置为h1元素，

$(this).closest(".navbar").prev(".header-inner").find("h1").text($(this).text());

DEMO

closest将根据提供的内容获得第一个匹配的父元素选择器。
prev将获得前一个兄弟姐妹，它会被忽略文本节点。
find将使后代与提供的选择器匹配。

上述代码将帮助您在多次使用相同类型的html结构时设置文本。但是如果你只有一次给定的html结构，那么你可以简单地使用$("div.header-inner > .cal-menu-na > h1").text($(this).text())来实现你想要的。

Answer 2

只需获取所选1的文字，然后在点击事件中使用a更新h1的文字：

.text()

<强> Demo

使用jQuery，显示一个元素

2 个答案:

DEMO