html 标签scss

Posted 2021-05-11

/* ------------------------------------------- */
/* Tabs */
/* ------------------------------------------- */


#tabwrap {
	background: #fff;
	overflow: hidden;
	width: 100%;


}
#tabs { overflow: hidden;
	/* tuck under border below */
	position: relative;
	top:1px;


}
#tabs li { list-style: none; }
#tabs li a {
	float: left;
	display: block;
	padding: 10px;

	width: 25%;
	text-decoration: none;
	text-align: center;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background: #EEE;



}

#tabs li a:hover { background: #EEE; }
#tabs li:first-child a { border-right: 0; }
#tabs li:last-child a { border-left: 0; }
#tabs li.current:last-child a {
	border-left: 1px solid #CCC;
}




.tab-content .current {

    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;


	-webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;


}




#tabs li.current a {
	background: #fff;
	pointer-events: none;
	border-right: 1px solid #CCC;
	border-bottom: 1px #FFF solid;

}

.tab-content > div {
	clear: both;
	padding: 20px;
	display: none;
}


.tab-content ul {
	margin-bottom: 0;
}

.tab-content {
	border: 1px solid #CCC;
	margin-bottom: $space;

}
.tab-content .current { display: block; }
.tab-content #home.first { display: block; }

.tab-content .product-codes {

  &__list {
    margin-bottom: 0;
  }

	&__list li {
		list-style-type: circle;
    &:last-child {
      margin-bottom: 0;
    }
	}



}

	jQuery('#tabs li:first-child').addClass('current');
	jQuery('#content div:first-child').addClass('current');

	jQuery('#tabs li a').click(function(e){

	    jQuery('#tabs li, #content .current').removeClass('current');
	    jQuery(this).parent().addClass('current');
	    var currentTab = jQuery(this).attr('href');
	    jQuery(currentTab).addClass('current');
	    e.preventDefault();

	});

<div id="tabwrap">
	
	<!-- TABS -->
	<ul id="tabs">
		
		<li class="current"><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 3</a></li>
	</ul>
	
	<!-- TAB CONTENT -->
	<div id="content" class="tab-content">
		
		<div id="tab1" class="current">
			Tab 1
		</div>
		
		<div id="tab2" class="current">
			Tab 2
		</div>
		
		<div id="tab3" class="current">
			Tab 3
		</div>
		
	</div> <!-- content -->
</div>