用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属性去切换标签的显示和隐藏的（不足处请补充）