<!DOCTYPE html><html><head> <meta charset="utf-8"/><title>javascript實現Tab切換</title><style>*{padding:0px;margin:0px;}ul li {cursor:pointer;float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:none;}ul li.fli {background-color:#ccc;color:red;}ul {overflow:hidden;list-style:none;}#tab_con {width:304px;height:200px;}#tab_con p{width:304px;height:200px;display:none;border:1px #bbb solid;border-top:none;text-align:center;}#tab_con p.fp {display:block;background-color:#ccc;}p:not(#tab_con){padding:20px 0px;color:blue;}</style></head><body><ul id="tab"><li class="fli">tab1</li><li>tab2</li><li>tab3</li></ul><p id="tab_con"><p class="fp">這是清華大學的校徽<img src="images/01.jpg"></p><p>這是浙江大學的校徽<img src="images/02.jpg"></p><p>這是華中科大的校徽<img src="images/03.jpg"></p></p><script>var tabs=document.getElementById("tab").getElementsByTagName("li");var ps=document.getElementById("tab_con").getElementsByTagName("p");for (var i=0;i<tabs.length;i++) {tabs[i].onmouseover=function(){change(this);}}function change(obj){for (var i=0;i<tabs.length;i++){if(tabs[i]==obj) {tabs[i].className="fli";ps[i].className="fp";}else {tabs[i].className="";ps[i].className=""} } }</script>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
