<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}

.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}

.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}

.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}

.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}

.products .main {
float: left;
display: none;
}

.products .main.selected {
display: block;
}

.tab li.active {
border-color: red;
border-bottom: 0;
}

</style>
<script src="jquery-1.12.2.js"></script>
<script>

$(function () {
$(".tab>li").mouseenter(function () {
var index=$(this).index();//获取当前鼠标进入的li标签的索引
$(this).addClass("active").siblings("li").removeClass("active");
//设置div的类样式

$(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
});
});
//有些事现在不做,以后就没有机会了
//有些事现在不做,是为了以后做的更好

</script>

</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>

</body>
</html>

tab栏切换案例的更多相关文章

  1. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  2. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  3. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  4. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  5. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  6. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  7. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. Latex 模版生成会议论文 不显示Keywords，而是显示 Index Terms- ，改成Keywords 方法

    一. 不管显示何种内容,TEX 文件都是 \begin{IEEEKeywords} 关键词1.关键词2,..... \end{IEEEKeywords} 其中:模版文件 IEEETran.cls存在下 ...

  2. Kaldi单音素模型 训练部分

    在Kaldi中,单音素GMM的训练用的是Viterbi training,而不是Baum-Welch training.因此就不是用HMM Baum-Welch那几个公式去更新参数,也就不用计算前向概 ...

  3. Scala微服务架构 一

    因为公司的一个项目需求变动会非常频繁,同时改动在可控范围内,加上产品同学喜欢一些超前思维,我们的CTO决定提前开启八门,使用微服务架构. 划重点 微服务架构主要特点: ==独立组件(自主开发升级)== ...

  4. JavaScript中JSON对象和JSON字符串的相互转化

    一.JSON字符串转换为JSON对象 var str = '{"name":"cxh","sex":"man",&quo ...

  5. OpenGL ES: iOS 自定义 UIView 响应屏幕旋转

    iOS下使用OpenGL 如果使用GLKit View 那么不用担心屏幕旋转的问题,说明如下: If you change the size, scale factor, or drawable pr ...

  6. C#中关于as关键字的使用

    我们在实际编码中有时会用到as关键字来将对象转换为指定类型,与is类型不同的是,is关键字是用于检查对象是否与给定类型兼容,如果兼容就返回true,如果不兼容就返回false.而as关键字会直接进行类 ...

  7. Liferay7 BPM门户开发之8: Activiti实用问题集合

    1.如何实现审核的上级获取(任务逐级审批) 这个是必备功能,通过Spring的注入+Activiti表达式可以很容易解决. 可参考: http://blog.csdn.net/sunxing007/a ...

  8. 10-部署配置dashboard插件

    配置和安装 dashboard 官方文件目录:kubernetes/cluster/addons/dashboard 我们需要使用的yaml文件 $ ls *.yaml dashboard-contr ...

  9. Xamarin.Android 使用 SQLite 出现 Couldn't read row 0, col -1 from CursorWindow. 异常

    异常:Java.Lang.IllegalStateException: Couldn't read row 0, col -1 from CursorWindow.  Make sure the Cu ...

  10. kafka的迁移干货

    随着业务的发展, 服务器所在网段/机群不允许kafka继续保留在那, 需要移动到先机器上. 哎呀上面是废话,总的说就是: 2台老kafka不要了,数据要迁移到新的2台kafka上面.要求数据不丢失 通 ...