<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
