选项卡切换demo-CSDN博客

注意：引用jq
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>选项卡切换</title>
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    </head>
    <style type="text/css">
        <!-- 选项卡样式 -->.info {
            width: 280px;
            background-color: #366;
            float: right;
        }
        
        .info ul {
            list-style: none;
        }
        
        .info ul li {
            float: left;
        }
        
        .info li span {
            border: 1px solid #CCF;
            border-bottom: none;
            cursor: pointer;
            background-color: #00C4C4;
            color: #FFF;
            display: block;
            width: 75px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
        
        .info .tab-content {
            width: 280px;
            height: 378px;
            border: 1px solid #CCF;
            position: absolute;
            left: 48px;
            overflow: auto;
            display: none;
        }
    </style>

    <body>

        <div class="info">
            <!-- 选项卡 -->
            <ul>
                <li>
                    <span style="background-color:#FFF; color:#339;">临床诊断</span>
                    <div class="tab-content" style="display:block;">123<br/> abc
                        <br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>abc<br/>a<br/>a<br/>a<br/> a
                        <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a
                        <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a
                        <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a
                        <br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>

                    </div>
                </li>
                <li>
                    <span>病史摘要</span>
                    <div class="tab-content">456</div>
                </li>
                <li>
                    <span>临床表现</span>
                    <div class="tab-content">789</div>
                </li>
            </ul>
        </div>
        <!--脚本-->
        <script type="text/javascript">
            //选项卡实现
            $(".info li").click(function() {
                var selLi = $(this);
                $(".info .tab-content").each(function() {
                    if($(this).parent().is(selLi)) {
                        $(this).prev().css("background", "#FFF");
                        $(this).prev().css("color", "#339");
                        $(this).show();
                    } else {
                        $(this).prev().css("background", "#00C4C4");
                        $(this).prev().css("color", "#FFF");
                        $(this).hide();
                    }
                });
            });
        </script>
    </body>

</html>