html格子切换效果图,HTML+JS+CSS 实现TAB切换

先上效果图:

CSS代码:.tab-contain{

padding:10px;

width: 100%;

}

#tabs {

overflow: hidden;

width: 100%;

margin: 0;

padding: 0;

list-style: none;

}

#tabs li {

float: left;

margin: 0;

padding:5px;

padding-bottom: 0px;

}

li a {

position: relative;

background: #ddd;

padding: 10px 50px;

float: left;

text-decoration: none;

color: #444;

text-shadow: 0 1px 0 rgba(255, 255, 255, .8);

border-radius: 20px 20px 0 0;

box-shadow: 0 2px 2px rgba(0, 0, 0, .4);

}

.current a{

outline: 0;

background: #fff;

z-index: 4;

}

.hoverItem a{

background: #AAC8B9;

}

#content {

background: #fff;

padding: 50px;

height: 220px;

position: relative;

border-radius: 0 5px 5px 5px;

box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

}

.item{

display: none;

}

.show{

display: block;

}

HTML:

• 用地保障情况
• 总体分布情况
• 用地审批进展情况

JS代码:$(function(){

$('#tabs a').click(function(e) {

e.preventDefault();

$('#tabs li').removeClass("current").removeClass("hoverItem");

$(this).parent().addClass("current");

$("#content div").removeClass("show");

$('#' + $(this).attr('title')).addClass('show');

// alert($(this).attr('title'));

if($(this).attr('title')=="tab1"){

//这边是打开第一页时候可以添加一些操作

}

if($(this).attr('title')=="tab2"){

//这边是打开第二页时候可以添加一些操作

}

if($(this).attr('title')=="tab3"){

//这边是打开第三页时候可以添加一些操作

}

});

$('#tabs a').hover(function(){

if(!$(this).parent().hasClass("current")){

$(this).parent().addClass("hoverItem");

}

},function(){

$(this).parent().removeClass("hoverItem");

});

});

本文来源于网络：查看 >https://blog.csdn.net/qq_28053177/article/details/79669047