js/jQuery는 단순히 탭 기능을 구현합니다.
- 高洛峰원래의
- 2017-02-04 14:38:28912검색
첫 번째 방법은 다음과 같이 네이티브 js 코드를 사용하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单选项卡</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
#tab li.current{color:#000;background:#ccc;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oLi = document.getElementById("tab").getElementsByTagName("li");
var oUl = document.getElementById("content").getElementsByTagName("ul");
for(var i = 0; i < oLi.length; i++)
{
oLi[i].index = i;
oLi[i].onmouseover = function (){
for(var n = 0;n < oLi.length;n++)
{
oLi[n].className = "";
this.className = "current";
}
for(var n = 0;n <oUl.length;n++)
{
oUl[n].style.display = "none";
oUl[this.index].style.display="block";
}
}
}
}
</script>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">科技</li>
<li>旅游</li>
<li>娱乐</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
<li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>
<li>诺基亚Lumia 925评测 最好的WP8智能手机</li>
<li> 联想IdeaPad S405评测 性能主流续航待提升</li>
<li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>网页换肤效果</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
</ul>
<ul>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
</ul>
<ul>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
</ul>
</div>
</div>
</body>
</html>두 번째 방법은 jQuery를 사용하는 것으로, 첫 번째 방법보다 코드가 간단합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单选项卡</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
#tab li.current{color:#000;background:#ccc;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
var timeid;
$("#tab").find("li").each(function(index){
var sLi=$(this);
sLi.mouseenter(function(){
timeid= setTimeout(function(){
sLi.addClass("current").siblings().removeClass("current");
sLi.parent().next().find("ul:eq(" + index +")").show().siblings().hide() ;
},300);
}).mouseleave(function(){
clearTimeout(timeid);
})
})
})
</script>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">科技</li>
<li>旅游</li>
<li>娱乐</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
<li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>
<li>诺基亚Lumia 925评测 最好的WP8智能手机</li>
<li> 联想IdeaPad S405评测 性能主流续航待提升</li>
<li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>网页换肤效果</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
</ul>
<ul>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
</ul>
<ul>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
</ul>
</div>
</div>
</body>
</html>첫 번째 방법은 네이티브를 사용하려면 js는 다른 사람의 방법을 기반으로 하고, 두 번째는 첫 번째 방법을 기반으로 제가 작성한 것입니다. . .
탭 기능만 구현한 js/jQuery 관련 글은 PHP 중국어 홈페이지를 참고해주세요!성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js 탭 구현 방법다음 기사：js 탭 구현 방법