<!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. PHP几种加密方式

    1.MD5() 2.Sha1() 3.urlencode()方法用于加密,urldecode()方法用于解密 4.base64_encode (  )  64位加密   base64_decode ( ...

  2. C#+ZXing.dll生成手机路径导航二维码

    1.原谅我先写点废话哈 这两天用C#写一个C端的软件,甲方提出一个很无理的需求(在C端的程序中实现路径导航,关键是这个程序最终是运行在物理隔绝的电脑上的……),头疼了好几天,领导突然想到可以把坐标+百 ...

  3. STL详解

    STL概貌                                                                                                ...

  4. InnoDB体系架构（三）Checkpoint技术

    Checkpoint技术 前篇 InnoDB体系架构(二)内存 从缓冲池.缓冲池的管理.重做日志缓冲.额外内存缓冲这四个点介绍了InnoDB存储引擎的内存结构,而在将缓冲池的数据刷新到磁盘的过程中使用 ...

  5. 7.ViewPagerIndicator

     ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,就像Google Play中切换的效果一样,还能使用在应用初始化的介绍页面</item> ...

  6. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. django权限管理(Permission)

    什么是权限管理 权限管理,一般指根据系统设置的安全规则或者安全策略,用户可以访问而且只能访问自 己被授权的资源 权限管理好比如钥匙,有了钥匙就能把门打开,但是权限设置是有级别之分的,假如这个 系统有多 ...

  8. 【xsy1303】生成树 乱搞

    题目大意:给你n个点,问这n个点构成的最小标准差生成树的值 这题题解里面写的都是什么代码?? 你用O(n^4)的复杂度,枚举出两条边,然后求平均数. 对于剩下的边,我们求出这些边与平均数的差,然后求最 ...

  9. web自动化测试---测试中其他一些常用操作

    一些其他常用操作如下: 1.最大化浏览器窗口 driver.maximize_window() 2.后退 driver.back() 3.前进 driver.forward() 4.刷新操作 driv ...

  10. .Net开源myrtille远程连接服务（支持SSH）

    今天在博客园首页,无意中看到一篇文章(https://github.com/Microsoft/dotnet/blob/master/dotnet-developer-projects.md),于是对 ...