css3圆形修边tab标签

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3圆形修边tab标签的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>css3圆形修边tab标签</title>
	<link rel="stylesheet" type="text/css" href="base.css" media="all" />
  <style type="text/css">
.demo {
  width: 660px;
  margin: 20px auto;
} 
.nav:after,
.nav:before {
  content:"";
  display: table;
} 
.nav:after {
  clear:both;
  overflow:hidden;
}
.nav {
  zoom: 1;
  margin-left: 20px;
}
.nav li {
  list-style: none outside none;
  float: left;
  position: relative;/*这个很重要*/
}
.nav .active {
  z-index: 3;/*当前项在最顶端*/
}
.nav li:before,
.nav li:after,
.nav  a:before,
.nav  a:after {
  content:"";
  position: absolute;
  bottom:0;

}
.nav li:before,
.nav li:after {
  background: rgb(10, 41, 30);
  width: 10px;
  height: 10px;
}
.nav li:before {
  left: -10px;
}
.nav li:after {
  right: -10px;
}
.nav a {
  float: left;
  padding: 10px 40px;
  text-decoration: none;
  color: rgb(220, 225, 233);
  background: rgb(10, 41, 30);
  border-radius: 10px 10px 0 0;
}
.nav .active a {
  background: rgb(220, 225, 233);
  color:rgb(10, 41, 30);
}

.nav  a:before,
.nav  a:after {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgb(10, 41, 30);
  z-index: 2;/*圆形在矩形上面*/
}
.nav .active a:before,
.nav .active a:after {
  background: rgb(10, 41, 30);
}
.nav  a:before {
  left:-20px; 
}
.nav  a:after {
  right: -20px;
}
/*当前项的:after和:before的z-index值为1*/
.nav .active:before,
.nav .active:after {
  z-index: 1;/*当前项的矩形在圆形下面*/
  background: rgb(220, 225, 233);
}
/*第一个选项卡的:before和最后一个选项卡的:after背景色不一样*/
.nav li:first-child a:before,
.nav li:last-child a:after {
  background-color: #fff;
}
.tab-content {
  background: rgb(220, 225, 233);
  color:rgb(10, 41, 30);
  padding: 20px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}
  </style>
</head>
<body>

<div class="page">
	<header id="header">
		<hgrounp class="white blank">
			<h1></h1>
			<h2><h2>
		</hgrounp>
	</header>
	<section class="demo">
  <ul class="nav nav-tabs" id="myTab">
    <li   class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
  </ul>
   
  <div class="tab-content">
    <div class="tab-pane active" id="home">Home Content</div>
    <div class="tab-pane" id="profile">Profile Content</div>
    <div class="tab-pane" id="messages">Messages Content</div>
    <div class="tab-pane" id="settings">Settings Content</div>
  </div>
	</section>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap-tab.js"></script>
<script type="text/javascript">
  $(function(){
    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })
  });
</script>
</body>
</html>

JS代码(bootstrap-tab.js):

/* ======================================================== * bootstrap-tab.js v2.1.1 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2012 Twitter,Inc. * * Licensed under the Apache License,Version 2.0 (the "License");
	* you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing,software * distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ======================================================== */
!function ($){
	"use strict";
	// jshint;
	_;
	/* TAB CLASS DEFINITION * ==================== */
 var Tab = function (element){
	this.element = $(element)}
Tab.prototype ={
	constructor:Tab,show:function (){
	var $this = this.element,$ul = $this.closest('ul:not(.dropdown-menu)'),selector = $this.attr('data-target'),previous,$target,e if (!selector){
	selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/,'') //strip for ie7}
if ( $this.parent('li').hasClass('active') ) return previous = $ul.find('.active a').last()[0] e = $.Event('show',{
	relatedTarget:previous}
) $this.trigger(e) if (e.isDefaultPrevented()) return $target = $(selector) this.activate($this.parent('li'),$ul) this.activate($target,$target.parent(),function (){
	$this.trigger({
	type:'shown',relatedTarget:previous}
)}
)}
,activate:function ( element,container,callback){
	var $active = container.find('> .active'),transition = callback && $.support.transition && $active.hasClass('fade') function next(){
	$active .removeClass('active') .find('> .dropdown-menu > .active') .removeClass('active') element.addClass('active') if (transition){
	element[0].offsetWidth // reflow for transition element.addClass('in')}
else{
	element.removeClass('fade')}
if ( element.parent('.dropdown-menu') ){
	element.closest('li.dropdown').addClass('active')}
callback && callback()}
transition ? $active.one($.support.transition.end,next):next() $active.removeClass('in')}
}
/* TAB PLUGIN DEFINITION * ===================== */
 $.fn.tab = function ( option ){
	return this.each(function (){
	var $this = $(this),data = $this.data('tab') if (!data) $this.data('tab',(data = new Tab(this))) if (typeof option == 'string') data[option]()}
)}
$.fn.tab.Constructor = Tab /* TAB DATA-API * ============ */
 $(function (){
	$('body').on('click.tab.data-api','[data-toggle="tab"],[data-toggle="pill"]',function (e){
	e.preventDefault() $(this).tab('show')}
)}
)}
(window.jQuery);

CSS代码(base.css):

@charset "utf-8";@import url("http://www.w3cplus.com/download/reset.css");/* ------------------------------------------------- * common * -------------------------------------------------*/
.page{text-align:left;padding-top:40px;}
.wrap_top_nav{background-color:#333;box-shadow:0 1px 3px rgba(0,0,0,0.25),0 -1px 0 rgba(0,0,0,0.1) inset;height:40px;}
#top_nav{width:1000px;margin:0 auto;position:relative;}
#top_nav a{font-size:16px;line-height:40px;float:left;margin-right:20px;color:#999;text-decoration:none;}
#top_nav a:hover{color:#fff;}
#top_nav li:nth-child(1) a{background-image:url(http://www.w3cplus.com/sites/all/themes/marvin/logo.png);background-position:0 -12px;background-repeat:no-repeat;background-size:68px 60px;padding-left:74px;color:#fff;width:74px;overflow:hidden;}
#read{position:absolute;right:0;top:0;font-family:'����';}
#header{text-align:center;}
#header .white{color:#fff;}
#header .blank{color:#444;}
#header h1{font-size:24px;}
#header h2{font-weight:normal;}
#ad_w3cplus{width:750px;margin:100px auto;text-align:center;}
#ad_w3cplus .grid-ad{float:left;}

附件:下载该文件资源,减少时间成本(增值服务)