用JQuery制作简单的标签页

1、先定义好需要用到的样式

<style type="text/css">
        .divTitle
        {
            float: left;
            border: 1px solid #000;
            border-bottom-width: 0px;
            border-right-width: 0px;
            color:Blue;
        }
        .divContent
        {
            clear: left;
            height: 200px;
            width: 300px;
            border: 1px solid #000;
            display: none;
        }
        .backgroundcolor
        {
            background-color: #999;
        }
    </style>

2、引用JQuery，和需要用到的JQuery代码

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".divTitle").click(function () {
                $(this).addClass("backgroundcolor").siblings().removeClass("backgroundcolor");
                var contentname = $(this).attr("name");
                $(".divContent[name=" + contentname + "]").show().siblings().hide();
            });
        })
    </script>

3、内容

        <div>
            <div class="divTitle" name="信息">
               信息
            </div>
            <div class="divTitle" name="电话">
                电话
            </div>
            <div class="divTitle" name="邮件" style="border-right-width: 1px">
                邮件
            </div>
        </div>
        <div>
            <div class="divContent" name="信息" style="display: block">
                11111111111111111
            </div>
            <div class="divContent" name="电话">
                22222222222222222
            </div>
            <div class="divContent" name="邮件">
                33333333333333333
            </div>
        </div>

4、总结：先用样式制作3个标签，然后再写3个对应的内容div，值得注意的是都添加了相同的name属性，所以JQuery代码中是根据name属性去切换标签的显示和隐藏的（不足处请补充）