织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

选项卡1

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡2

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡3

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡4

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡5

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡6

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡7

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

选项卡8

选项卡的内容写于此地,李丕长选项卡制作过程曝光,李丕长选项卡制作过程曝光

显示详情

制作如上所示的选项卡功能,样式代码和jquery代码如下希望对你有用

jquery代码如下:
$(document).ready(function() {
	$('#tab').children("li").each(function(index){
		var thisid=$(this);
		$(this).mousemove(
		function () {
$('#content > div:eq('+index+')').show().siblings().hide();
		});
	});
});
样式代码如下:
.navigation {
background: url(/images/test/navigation.png) no-repeat 0 0;
width: 984px;
height: 90px;
padding-top: 9px;
padding-left: 20px;
position: absolute;
z-index: 100;
top: 155px;
left: 130px;
}

.navigation ul li {
float: left;
font-size: 18px;
font-family: 'museo', arial, helvetica, serif;
background: url(/images/test/nav-border.png) no-repeat right 0;
line-height: 48px;
padding: 0 28px;
}

.navigation ul li a {
color: #fff;
text-shadow: rgba(0,0,0,0.6) 0px 1px 0px;
cursor:pointer;
}
.navigation ul li a:hover {
text-decoration: none;
color: #f6c387;
}
.contented{
position: absolute;
z-index: 99;
padding-top: 100px;
}

.col {
width: 300px;
float: left;
}

.col h3 {
font-size: 24px;
font-family: 'museo', arial, helvetica, serif;
font-weight: normal;
color: #c73331;
padding-bottom: 24px;
text-shadow: 0 1px 0 #fff;
}
 .alignleft {
float: left;
display: inline;
}
.cnt p{
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
}
a.dot {
text-decoration: underline;
padding-left: 7px;
}