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

  • Pure css3 accordion

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

    • 355
    • 18
    • 355
    • facebook icon
    • twitter icon
    • google plus
  • Hanging menu on window scroll

    After scrolling window beyond menu height, a floating bar appears at the top having same menu inside it.

    • 324
    • 12
    • 324
    • facebook icon
    • twitter icon
    • google plus
  • Copy text to clipboard

    Copy text from browser to your clipboard and paste as per your requirement.

    • 281
    • 2
    • 281
    • 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