HTML5实现Tab切换（通过js代码）

时间2024-01-23 15:26:27发布访客分类HTML浏览233

导读：收集整理的这篇文章主要介绍了HTML5实现Tab切换（通过js代码），觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家介绍的内容是关于HTML5实现Tab切换（通过js代码），有一定的参考价值，有需要的朋友可以参考一下，希望对...

收集整理的这篇文章主要介绍了HTML5实现Tab切换（通过js代码），觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章给大家介绍的内容是关于HTML5实现Tab切换（通过js代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

!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;
    itabs.length;
i++) {
tabs[i].onmouseover=function(){
    change(this);
}
}
function change(obj){
    for (var i=0;
    itabs.length;
i++){
if(tabs[i]==obj) {
    tabs[i].classname="fli";
    ps[i].className="fp";
}
else {
    tabs[i].className="";
ps[i].className=""}
 }
 }
    /script>