Tab页切换样式特效

简单而易懂的常见tab切换效果，不知道能帮到有需要的同行，如写的不好勿喷，还请多多支持。

效果图部分

CSS部分

content {
                width: 600px;  
                height: 200px;  
            }
            #tab_bar {  
                width: 600px;
                height: 20px;
                float: left;
                border-bottom: 2px solid #E9EEED; 
            }
            #tab_bar ul {  
                padding: 0px;  
                margin: 0px;  
                height: 20px;  
                text-align: center;  
            }  
            #tab_bar li {  
                list-style-type: none;  
                float: left;  
                width: 133.3px;  
                height: 20px; 
                cursor: pointer;
                color: #999999;
            }  
            .tab_css {  
                width: 599px;  
                height: 200px;   
                display: none;  
                float: left;  
            }

HTML部分

<p id="content">  
            <p id="tab_bar">  
                <ul>  
                    <li id="tab1" onclick="myclick(1)" style="border-bottom: 3px solid #1DD1BC;color: #1DD1BC;">  
                        tab1  
                    </li>  
                    <li id="tab2" onclick="myclick(2)">  
                        tab2  
                    </li>  
                    <li id="tab3" onclick="myclick(3)">  
                        tab3  
                    </li>  
                </ul>  
            </p>  
            <p class="tab_css" id="tab1_content" style="display: block">  
                <p>页面一</p>  
            </p>  
            <p class="tab_css" id="tab2_content">  
                <p>页面二</p>  
            </p>  
            <p class="tab_css" id="tab3_content">  
                <p>页面三</p>  
            </p>  
        </p>

JS部分

var myclick = function(v) {  
                var llis = document.getElementsByTagName("li");  
                for(var i = 0; i < llis.length; i++) {  
                    var lli = llis[i];
                    if(lli == document.getElementById("tab" + v)) {
                        lli.style.borderBottom = "3px solid #1DD1BC";
                        lli.style.color = "#1DD1BC";
                    } else {
                        lli.style.borderBottom = "0px solid #DFDFDF";
                        lli.style.color = "#999999";
                    }
                }  
                var ps = document.getElementsByClassName("tab_css");  
                for(var i = 0; i < ps.length; i++) {  
                    var pv = ps[i];  
                    if(pv == document.getElementById("tab" + v + "_content")) {  
                        pv.style.display = "block";  
                    } else {  
                        pv.style.display = "none";  
                    }  
                }  
            }