Provide zblog template_zblog them_wordpress template download and customization

Simple tab tag jQuery code that can be reused in multiple places on a page

Tianxing Studio 2018-01-11 22:43 Web special effects four thousand nine hundred and fifty-four 0 Comments


Always used before“ SuperSlide ”This js framework writes tab tags or other effects, but it is slowly discovered that Zblog topic It can't use such a large js framework, especially SuperSlide is not friendly to mobile phones, so it's not used much now.

Now some simple js effects of the page are slowly starting to be written. This article introduces a "simple tab tag jQuery code that can be reused in multiple places on a page".

Ps: This code depends on the JQ library. Please introduce the JQ library of version 1.8 or above before using it.

The js code is as follows:

 function tabs(tabTit,on,tabCon){     $(tabTit).children().click(function(){         $(this).addClass(on).siblings().removeClass(on);         var index = $(tabTit).children().index(this);         $(tabCon).children().eq(index).show().siblings().hide();     }); }; tabs(".tab-hd","active",".tab-bd");

The html code structure is as follows:

 <div class="box"> <ul class="tab hd"><li class="active">Label 1</li><li>Label 2</li><li>Label 3</li></ul>     <dl class="tab-bd"> <dd class="thisclass">Content 1</dd> <dd>Content 2</dd> <dd>Content 3</dd>     </dl> </div>

This code can be used in multiple places on a page. Add a private class attribute to each box to define different tab styles.


welcome you Comment: Cancel Reply

 Please fill in the verification code
  • Latest articles
  • Hot article ranking
  • Most Comments
Label aggregation
  • Sign in
  • Registered account Forgot your password?
  • register
  • Already have an account? Direct login Forgot your password?
  • Social account login