table图制作

时间：2019-12-17 17:11:09 阅读：124 评论：0 收藏：0 [点我收藏+]

①html中写入</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")

});

希望对需要的有所帮助,同时也需要大神们指点,评论;

table图制作

原文：https://www.cnblogs.com/lxc127136/p/12055508.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)