0%

Hey! Do you have any query related to front end?

Sign in Sign up

Tabbing with id and rel attributeBack

How it works

It is quiet simple. This grabs the id of the tab LI and the rel attribute of details LI and match it for equality. As it match with each other, it hides all details data and show the matched details accordingly. The concept is this only.

Whole code is here:

$(document).ready(function(){
	$('.tabs li').click(function(){

		//Remove activeTab class from all li of tabs
		$('.tabs li').removeClass('activeTab');

		//Add activeTab class on clicked li of tabs
		$(this).addClass('activeTab');

		//Grab ID attribute of clicked id
		var targetRel = $(this).attr('id');

		//Remove activeTabDetail class from all li of details
		$('.tabDetailsCon li').removeClass('activeTabDetail');

		//Run loop for tab details container
		$('.tabDetailsCon li').each(function(){

			//Grab rel attribute of each detail container
			var relval = $(this).attr('rel');

			//Equate id and rel variable
			if(targetRel == relval){

				//Add activeTabDetail class to equated detail
				$(this).addClass('activeTabDetail');

				//Break the loop as it got the result from extra looping
				return false;
			}
		});
	});
});

What's the use if index() function is there:

This is good idea to tab any content on the page. Because it works related to id and rel rather then position on the page.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Characters limit in textarea

    Limit charecters in textarea without extra space.

    • 278
    • 5
    • 278
    • facebook icon
    • twitter icon
    • google plus
  • Pure css3 accordion

    A pure css3 accordion which has been created by target pseudo selector.

    • 376
    • 18
    • 376
    • facebook icon
    • twitter icon
    • google plus
  • Image selection like checkbox

    Select your image like a checkbox with little jQuery

    • 413
    • 43
    • 413
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password