html 带有jQuery的标签内容

Posted 2021-05-11

$('.tabbed-container').each(function(index, el) {
		var navtab = $(this).find('#navtab');
		var contenttab = $(this).find('#contenttab');

		navtab.find('li:eq(0)').addClass('navactivo');
		contenttab.find('> div:eq(0)').nextAll().hide();

		$('#navtab li',this).click(function(e) {
		  e.preventDefault();
		  navtab.find('li').removeClass();
		  contenttab.find('>div').hide();
		  $(this).addClass('navactivo');
		  var index = navtab.find('li').index(this);
		  contenttab.find('> div:eq('+index+')').fadeIn();
		});
	});

<ul id="navtab" class="clearfix">
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
</ul>

<div id="contenttab">
    <div>
        Contenido 1
    </div>
    <div>
      Contenido 2
    </div>
    <div>
        Contenido 3
    </div>
</div>