I would like to express my gratitude to everyone who has helped me. Please forgive my poor English :)
Can someone provide me with a jQuery script that can extract the name of the currently selected tab and display it in an h1 tag? Whenever the selected tab changes, I want the content in the h1 tag to dynamically update.
For example, here is my current setup:
<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>
What I am aiming for is:
<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>
You can find a full demo at: https://jsfiddle.net/zh8rqnkd/