tab标签页

摘要：自己写、js(jq)做成标签页，样式自行添加。

 

效果图：

 

//html

<div class="building-page-attr">
                        <ul class="building-attr-tab">
                            <li onclick="tab('tab1')" class="tab-active">标题1</li>
                            <li onclick="tab('tab2')">标题2</li>
                            <li onclick="tab('tab3')">标题3</li>
                        </ul>
                        <div class="building-attr-tabcontent">
                            <div id="tab1">
                                内容1
                            </div>
                            <div id="tab2" style="display: none">
                                内容2
                            </div>
                            <div id="tab3" style="display: none">
                                内容3
                            </div>
                        </div>
                    </div>






//js

        function tab(pid){
            var thisEl=event.target;
            $(thisEl).addClass('tab-active');
            $(thisEl).siblings('li').removeClass('tab-active');
            var tabs=["tab1","tab2","tab3"];
            for(var i=0;i<4;i++){
                if(tabs[i]==pid){
                    $('#'+tabs[i]).show();
                }else{
                    $('#'+tabs[i]).hide();
                }
            }
        }

附：event.target获取当前点击事件，$(event.target)把它封装成jq对象。