收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0;padding: 0;list-style: none;text-decoration: none;color: #333;}
.box{width: 400px;height: 300px;margin: 100px auto;overflow: hidden;border: 1px solid #eee;border-radius: 3px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.menu{background: #f2f2f2;}
.menu li{float: left;padding: 10px 30px;cursor: pointer;border-left: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE;margin-left: -1px;border-radius: 2px;}
.menu:after {content: "";display: block;height: 0;clear: both;}
.active{background: #fff;}
.menuDiv div{width: 400px;height: 259px;background: #fff;}
.menuDiv div img{width: 100%;height: 100%;}
</style>
</head>
<body>
<!--测试原生js选项卡-->
<!--<div>
<ul>
<li><a href="javascript:;">水果</a></li>
<li><a href="javascript:;">蔬菜</a></li>
<li><a href="javascript:;">主食</a></li>
</ul>
<div>
<div id="tabContent1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836547896&di=dbda6cce7c8851404fea95dc3de9da9f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150805%2F0035035595180516_b.jpg"/></div>
<div id="tabContent2"><img src="http://pic.58pic.com/58pic/15/37/25/81j58PIC8wQ_1024.jpg"/></div>
<div id="tabContent3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836725955&di=16da7786d6a2895b9e1aa54baba8e816&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd833c895d143ad4bade816f989025aafa50f06c0.jpg"/></div>
</div>
</div>-->
<!--jQuery第一种写法：-->
<!--<div>
<ul>
<li><a href="javascript:;">水果</a></li>
<li><a href="javascript:;">蔬菜</a></li>
<li><a href="javascript:;">主食</a></li>
</ul>
<div>
<div id="tabContent1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836547896&di=dbda6cce7c8851404fea95dc3de9da9f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150805%2F0035035595180516_b.jpg"/></div>
<div id="tabContent2"><img src="http://pic.58pic.com/58pic/15/37/25/81j58PIC8wQ_1024.jpg"/></div>
<div id="tabContent3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836725955&di=16da7786d6a2895b9e1aa54baba8e816&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd833c895d143ad4bade816f989025aafa50f06c0.jpg"/></div>
</div>
</div>-->
<!--jQuery第二种写法：-->
<!--<div>
<ul>
<li index="tabContent1" onmouseenter="tab(this,'.menuDiv')"><a href="javascript:;">水果</a></li>
<li index="tabContent2" onmouseenter="tab(this,'.menuDiv')"><a href="javascript:;">蔬菜</a></li>
<li index="tabContent3" onmouseenter="tab(this,'.menuDiv')"><a href="javascript:;">主食</a></li>
</ul>
<div>
<div id="tabContent1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836547896&di=dbda6cce7c8851404fea95dc3de9da9f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150805%2F0035035595180516_b.jpg"/></div>
<div id="tabContent2"><img src="http://pic.58pic.com/58pic/15/37/25/81j58PIC8wQ_1024.jpg"/></div>
<div id="tabContent3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836725955&di=16da7786d6a2895b9e1aa54baba8e816&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd833c895d143ad4bade816f989025aafa50f06c0.jpg"/></div>
</div>
</div>-->
<!--jQuery第三种写法：-->
<div>
<ul>
<li index="tabContent1" onmouseenter="tab(this)"><a href="javascript:;">水果</a></li>
<li index="tabContent2" onmouseenter="tab(this)"><a href="javascript:;">蔬菜</a></li>
<li index="tabContent3" onmouseenter="tab(this)"><a href="javascript:;">主食</a></li>
</ul>
<div>
<div id="tabContent1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836547896&di=dbda6cce7c8851404fea95dc3de9da9f&imgtype=0&src=http%3A%2F%2Fpic36.photophoto.cn%2F20150805%2F0035035595180516_b.jpg"/></div>
<div id="tabContent2"><img src="http://pic.58pic.com/58pic/15/37/25/81j58PIC8wQ_1024.jpg"/></div>
<div id="tabContent3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513836725955&di=16da7786d6a2895b9e1aa54baba8e816&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fd833c895d143ad4bade816f989025aafa50f06c0.jpg"/></div>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//原生js选项卡
/*window.onload = function () {
var Lis = document.getElementsByClassName('menu')[0].getElementsByTagName('li'); //获取li元素
var tabContent = document.getElementsByClassName('menuDiv')[0].getElementsByTagName('div'); //获取div
for (var i=0; i<Lis.length; i++) {
Lis[i].index = i; /
Lis[i].onmouseout = function () {
for (var i=0; i<Lis.length; i++) {
Lis[i].className = '';
tabContent[i].style.display = 'none';
}
this.className = 'active';
tabContent[this.index].style.display = 'block';
}
}
}*/
//jQuery第一种写法：
/*$('.menu li').hover(function(){
$('.menu').find('li').removeClass('active'); //清除所有li元素的active类
$('.menuDiv').find('div').css('display','none'); //menuDiv下的div元素都隐藏
$(this).addClass('active'); //当前Li元素添加active类样式
$('.menuDiv').find('div').eq($(this).index()).css('display','block'); // 获取与当前li元素下标相等的div让它显示
})*/
//jQuery第二种写法：
/*function tab(self,content) {
$(self)
.addClass('active') //当前高亮
.siblings() //找到兄弟节点
.removeClass('active'); //清除兄弟节点高亮
$(content)
.find('div') //menuDiv下的div
.eq($(self).index()) //eq下标等于$(self).index() 当前
.show() //当前div显示
.siblings() //找到兄弟节点
.hide(); //让兄弟节点全部隐藏
}*/
//jQuery第三种写法：
function tab(self) {
$(self)
.addClass('active') //当前高亮
.siblings() //找到兄弟节点
.removeClass('active'); //清除兄弟节点高亮
var box = "#" + $(self).attr("index"); //获取当前的自定义索引属性,获取当前点击的是哪一个
$(box)
.show() //当前div显示
.siblings() //找到兄弟节点
.hide(); //让兄弟节点全部隐藏
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
