首页 > 代码库 > JS-选项卡制作

JS-选项卡制作

2024-08-13 12:11:41   218人阅读

<!DOCTYPE html>
<html>

<head>

＜meta name="author" content"郭菊锋,702004176@qq.com"＞
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
text-decoration: none;
color: black;
}

li {
list-style: none;
}

.tapWrap {
border: 1px solid #4169E1;
width: 50%;
margin: 10px auto;
padding: 10px;
}

.tapWrap>ul li {
width: 75px;
height: 45px;
line-height: 45px;
text-align: center;
/*padding: 5px 10px;*/
border: 2px solid #ccc;
background-color: white;
}

.tapWrap>ul li:hover {
border-bottom: none;
cursor: pointer;
}

.tapWrap div {
width: 50%;
padding: 10px;
margin-top: -3px;
/*display: inline-block;*/
border: 1px solid #4169E1;
border-top: 3px solid #DC143C;
}

.tapWrap>ul li{
display: inline-block;
}

.tapWrap>ul li:hover,
.tapWrap div:hover{
border-top: 3px solid #DC143C;
}
.on {
border-top: 3px solid #DC143C;
border-bottom: 5px solid #fff;
}
.hide{
display: none;
}
</style>
</head>

<body>
<div class="tapWrap" id="tapWrap">
<ul id="tapHeadWrap">
<li id="li1">房产</li>
<li id="li2">家居</li>
<li id="li3">二手房</li>
</ul>
<div>
<ul>
<li>
<a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a>
</li>
<li>
<a href="javascript:;">200万内购五环三居 140万安家东三环</a>
</li>
<li>
<a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a>
</li>
<li>
<a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a>
</li>
</ul>
</div>
<div class="hide">
<ul>
<li>
<a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a>
</li>
<li>
<a href="javascript:;">经典清新简欧哀家 90平老房焕发新生</a>
</li>
<li>
<a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a>
</li>
<li>
<a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a>
</li>
</ul>
</div>
<div class="hide">
<ul>
<li>
<a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a>
</li>
<li>
<a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a>
</li>
<li>
<a href="javascript:;">皇城根小学学区仅260万 121平70万抛！</a>
</li>
<li>
<a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var divWrap = document.getElementById(‘tapWrap‘);
var div = divWrap.getElementsByTagName(‘div‘);
// alert(div.length)
var ul = document.getElementById(‘tapHeadWrap‘);
var li = ul.getElementsByTagName(‘li‘);
// alert(li.length)
for(var i=0;i<li.length;i++){
li[i].index = i;
li[i].onclick = function(){
for(var j = 0;j<li.length;j++){
li[j].className = "";
div[j].className = "hide";
}
this.className = "on";
div[this.index].className = "";
}
}
}

</script>
<!--
/*
<script type="text/javascript">
var divWrap = document.getElementById(‘tapWrap‘);
var ul = document.getElementById(‘tapHeadWrap‘);
var divs = divWrap.childNodes;//此方法==var divs = divWrap.getElementsByTagName("div");==divWrap.children
var li1 = ul.childNodes;//==用这个获取，可是七个，把空文本换行符也包含进来的7个子集
var li2 = ul.getElementsByTagName(‘li‘);//用这个方法，获取的就是那干脆又干净的三个li
var li3 = ul.children;
// alert(li3.length);
//li1 == li2,方法获取到的都是一个集合，但是 【父元素.childNodes】方法的缺点是还有空文本在里面，需要你经过判断li1[i].nodeType==1（如下for循环处）.至于ByTagName的方法，取巧在【父元素.getElementsByTagName(‘标签‘)】,这样获取下来的就是父元素下的那几个干净的标签。而childNodes的改进方法就是 【父元素.children】,这样获取的就和ByTagName的一样，忽略空格换行符文本，只找实实在在存在的标签，然后汇成集合。最终长度也是只有3个li。
// alert(li1.length)
// alert(li1[1].nodeType);
for(var i = 0; i < li1.length; i++) {
if(li1[i].nodeType == 1) {//这是用了【父元素.childNodes】方法后，必须判断，把空文本排除出来的方法。因为空文本的nodeType==3，而只有元素标签的nodeTypd==3。
this.onclick = function() { //li1[i]==this，可用li1[i]替换
//代码段
}
}
}

/*
for(var j = 0; j < divs.length; j++) {
if(divs[j].nodeName == ‘DIV‘) {
var arr = []; //尝试用数组，获取三个div，然后赋值给数组，再通过li的索引，调用对应的div/后来看参考，使用的tagname获取的三个div

// alert(‘yes‘);
arr = divs[j];
// alert(divs[j]);

}
}
*/
</script>
*/
-->
<!--
/*
* //幕友第一名代码
* <script type="text/javascript">
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;//解释代码：http://www.imooc.com/qadetail/68459
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
</script>
//幕友第二名代码
<script type="text/javascript">

window.onload=function(){
var oTab = document.getElementById("tabs")
var li = document.getElementsByTagName("li");
var div = oTab.getElementsByTagName("div");//oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div

for(var i=0;i<li.length;i++){//获取所有i编号的元素
li[i].index = i; //定义一个index属性对li进行编号
li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态
for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式
li[n].className = "";
div[n].className = "hide";
}
this.className = "on";//再对点击事件添加相应的属性
div[this.index].className = "";//通过之前的index编号绑定的指定div
}
}
}

</script>
*/-->

</html>

<style></style>

JS-选项卡制作


联系
我们