DIV+CSS 样式简单布局Tab 切换 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script>

    <style type="text/css">
        .content
        {
            margin: 50px;
            border: 8px;
            width: auto;
            height: auto;
        }
        .title
        {
            height: 20px;
            width: auto;
        }
        .common
        {
            width: 20%;
            float: left;
            font-size: 20px;
            color: Black;
            background-color: #E0E0E0;
        }
        .selected
        {
            background-color: #EEE;
        }
        .contentBody
        {
            width: auto;
            height: 500px;
        }
        .contendiv
        {
            padding: 20px;
            width: 97%;
            height: 500px;
            float: left;
            background-color: #EEE;
        }
        .divHidden
        {
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function() {

            $(".common").click(function() {
                var divId = $(this).attr("id");
                //alert(divId);
                if (jQuery(this).attr("class").indexOf("selected") > 0) {
                    //jQuery(this).removeClass("selected")
                } else {
                    $("div").removeClass("selected");
                    jQuery(this).addClass("selected");

                }
                
                //var list = $(".contendiv");

                $(".contendiv").addClass("divHidden");
                $("#div" + divId).removeClass("divHidden");


            });

        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="content">
            <div class="title">
                <div id="1" class="common selected">
                    Tab1
                </div>
                <div id="2" class="common">
                    Tab2
                </div>
                <div id="3" class="common">
                    Tab3
                </div>
            </div>
            <div class="contentBody">
                <div id="div1" class="contendiv">
                    我是tab1
                </div>
                <div id="div2" class="contendiv divHidden">
                    我是tab2
                </div>
                <div id="div3" class="contendiv divHidden">
                    我是tab3
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>


这个是一个最简单最原始的基本Tab切换的样子。很简单，刚学习样式布局JQuery的同学可以参考。大牛就不要拍砖了。

只要控制好头部的DIV的点击事件就OK了，下面对应的三个DIV的相对应切换隐藏。So Easy！

posted @ 2014-06-24 12:32  闪存第一莽撞人  阅读(1373)  评论(0)  编辑  收藏  举报