使用jQuery,显示一个元素

第一个感谢大家帮助我.抱歉我的英语不好:)

我需要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/

只需获取所选a的文本并使用click事件上的.text()更新h1的文本：

$('.cal-menu-na h1').text($(this).text());

Demo