用css3和jquery制作一个带有斜角的选项卡面板

今天我们将使用CSS 3 gradients技术创建一个好看的带有斜角的选项卡面板。下面就直接上代码

HTML

tab1 - content

tab2 - content

tab3 - content

tab4 - content

CSS

#tabs {
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}

#tabs li {
margin: 0;
padding: 0;
float: left;
}

#tabs a {
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: linear-gradient(225deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px ‘Lucida sans’, Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}

#tabs a:hover {
background: #c93434;
background: linear-gradient(225deg, transparent 10px, #c93434 10px);
}

#tabs a:focus {
outline: 0;
}

#tabs #current a {
background: #fff;
background: linear-gradient(225deg, transparent 10px, #fff 10px);
text-shadow: none;
color: #333;
}

#content {
background-color: #fff;
background-image: linear-gradient(top, #fff, #ddd);
border-radius: 0 2px 2px 2px;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
}

/* 这里的高度可随意*/
#content div {
height: 220px;
}

jQuery

下面的代码可能不是最好的，但我认为它相当不错

$(document).ready(function() {
$(“#content div”).hide(); // 最初隐藏所有内容
$(“#tabs li:first”).attr(“id”,”current”); // 激活第一个选项卡
$(“#content div:first”).fadeIn(); // 显示第一个标签内容

$(‘#tabs a’).click(function(e) {
e.preventDefault();
$(“#content div”).hide(); // 隐藏所有内容
$(“#tabs li”).attr(“id”,””); // 重置Id
$(this).parent().attr(“id”,”current”); // 这里点击后激活
$(‘#’ + $(this).attr(‘title’)).fadeIn(); // 显示当前选项卡的内容
});
})();