tab-Tab-[data-class]

<!--************* HTML *************--

<div id= "Tabnav" >

<span class= "Active" data-class= "plaint" > Platform Introduction </span>

<span data-class= "Compro" > Company Profile </span>

<span data-class= "Costpro" > Platform Fees </span>

</div>

<div class= "Clear Bordertblr mb30" id= "Tabcont" >

<!--platform Profile--

<div class= "Plaint" ></div>

<!--company Profile--

<div class= "Compro" ></div>

<!--platform Fee--

<div class= "Costpro" ></div>

</div>

<!--************* CSS *************--

#tabNav span {float:left;cursor:pointer;display:inline-block;padding:5px 14px;color:rgb (28,127,219); Background-color: #F6F6F6; font-size:15px;}

#tabNav span.active {Background-color:rgb (28,127,219); color:white;}

. Compro,

. costpro {Display:none;}

JQ *************

$ ("#tabNav span"). On (' click ', function () {

var data = $ (this). attr ("Data-class");

$ (this). AddClass ("active"). Siblings (). Removeclass ("active");

$ ("#tabCont." +data). Show (). siblings (). Hide ();

})

This article is from the "Riverside Camellia" blog, please make sure to keep this source http://shancha.blog.51cto.com/5215524/1602442

tab-Tab-[data-class]