js和jq 3中方法制作table图
一、前两种方法(html和css不变);
①html中写入</div>
<div class="f1">
<div class="f2 cl">
<div class="f4">电脑登录</div>
<div class="f4">手机登录</div>
<div class="f4">邮箱登录</div>
</div>
<div class="f3">
<div class="f5">111</div>
<div class="f6">222</div>
<div class="f7">333</div>
</div>
</div>
②引入css;
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.fl{
float:left;
}
.fr{
float:right;
}
.cl::after{
content: "";
display:block;
clear: both;
}
.f1{
width: 600px;
height: 600px;
margin: 0 auto;
}
.f2 div{
float: left;
width:175px;
height:50px;
text-align: center;
line-height: 50px;
border: 1px solid #000000;
cursor: pointer;
background-color: #0beee3;
}
.f3 div{
border: 1px solid #000000;
height: 300px;
font-size: 20px;
line-height: 300px;
width: 525px;
text-align: center;
}
.f6{
display: none;
}
.f7{
display: none;
}
<3> 两种方法: 第二种方法注意,先引入js库,再引入自己的写的js路径;
①js里面写入
document.getElementsByClassName("f4")[0].onclick=function(){
this.style.color="red";
document.getElementByClassName("f5").style.display="block";
document.getElementByClassName("f6").style.display="none";
document.getElementByClassName("f7").style.display="none";
}
document.getElementsByClassName("f4")[1].onclick=function(){
this.style.color="red";
document.getElementByClassName("f5").style.display="none";
document.getElementByClassName("f6").style.display="block";
document.getElementByClassName("f7").style.display="none";
}
document.getElementsByClassName("f4")[2].onclick=function(){
this.style.color="red";
document.getElementByClassName("f5").style.display="none";
document.getElementByClassName("f6").style.display="none";
document.getElementByClassName("f7").style.display="block";
}
②jquery写入
$(".f4").eq(0).click(function(){
this.style.color="red";
$(".f5").css('display',"block");
$(".f6").css('display',"none");
$(".f7").css('display',"none");
});
$(".f4").eq(1).click(function(){
this.style.color="red";
$(".f5").css('display',"none");
$(".f6").css('display',"block");
$(".f7").css('display',"none");
});
$(".f4").eq(2).click(function(){
this.style.color="red";
$(".f5").css("display","none")
$(".f6").css("display","none")
$(".f7").css("display","block")
});
二、第三种做法(Html、jq改变)
①html部分:
<body>
<div class="f1">
<div class="f2 cl">
<div class="f4">电脑登录</div>
<div>手机登录</div>
<div>邮箱登录</div>
</div>
<div class="f3">
<div class="f4">111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</body>
②css 部分
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.fl{
float:left;
}
.fr{
float:right;
}
.cl::after{
content: "";
display:block;
clear: both;
}
.f1{
width: 600px;
height: 600px;
margin: 0 auto;
}
.f2 div{
float: left;
width:175px;
height:50px;
text-align: center;
line-height: 50px;
border: 1px solid #000000;
cursor: pointer;
}
.f2 div:hover{
background-color: blue;
color: #fff;
font-size: 20px;
}
.f3 div{
border: 1px solid #000000;
height: 300px;
font-size: 20px;
line-height: 300px;
width: 525px;
text-align: center;
display: none;
}
.f3 div.f4{
display: block;
}
③jq部分
$(".f2 div").click(function(){
$(this).addClass("f4").siblings().removeClass("f4");
var i = $(this).index();
$(this).parent().next(".f3").find("div").eq(i).addClass("f4").siblings().removeClass("f4")
})
希望对需要的有所帮助,同时也需要大神们指点,评论;
