博客

标签页切换

  • Post author:
  • Post category:其他



标签页切换应该是网页中最常见的功能之一了吧，今天简单的做个记录，希望能帮到一部分初学者


HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<


div


id


=


"header"


>



<


ul


class


=


"clearfix"


>



<!-- 注意看a标签的href属性和下面三个div的id值 -->



<


li


><


a


href


=


"#containerOne"


>标签一</


a


></


li


>



<


li


class


=


"active"


><


a


href


=


"#containerTwo"


>标签二</


a


></


li


>



<


li


><


a


href


=


"#containerThree"


>标签三</


a


></


li


>



</


ul


>

</


div


>

<


div


id


=


"mainContainer"


>



<


div


id


=


"containerOne"


>



第一个标签页<


br


>



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.



</


div


>



<


div


id


=


"containerTwo"


class


=


"active"


>



第二个标签页<


br


>



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maiores nemo possimus quas ratione? Aspernatur assumenda aut consequatur, culpa delectus exercitationem fuga laborum numquam provident sapiente, sequi suscipit ut voluptas!



</


div


>



<


div


id


=


"containerThree"


>



第三个标签页<


br


>



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi, assumenda dolores doloribus eum ex expedita fuga fugiat impedit, laboriosam minus nam repellendus reprehenderit saepe sequi similique, sit sunt voluptatibus.



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam eius id, magni maiores odio provident quibusdam rerum tempora ullam? Assumenda deleniti impedit minima officiis perferendis. Accusantium dolorem nemo perferendis.



</


div


>

</


div


>




CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*简单重置下样式*/

*{



margin


:


0


;


padding


:


0


;}

ul{



list-style


:


none


;}

a{



text-decoration


:


none


;


color


:


#000


;}

.clearfix{zoom:


1


;}

.clearfix:after{



content


:


''


;


display


:


block


;


clear


:


both


;}

/*标签头样式*/

#header{



background


:


#4bb


;}

#header ul li{



float


:


left


;


width


:


33.3%


;


text-align


:


center


;}

#header ul li a{



display


:


block


;


width


:


100%


;


height


:


30px


;


line-height


:


30px


;


font-weight


:


bold


;


letter-spacing


:


1px


;}

#header ul li.active{



background


:


#ae2


;}

#header ul li.active a{



color


:


#f00


;}

/* 默认隐藏 */

#mainContainer>div{



display


:


none


;}

#mainContainer>div.active{



display


:


block


;}




JS代码，注意先引入jQuery

1
2
3
4
5
6
7
8

$(


'#header ul li a'


).click(


function


(e){



e.preventDefault();


//阻止a链接默认跳转



//控制标签头



$(


this


).parent().addClass(


'active'


).siblings(


'.active'


).removeClass(


'active'


);



//控制显示对应的div



var


id = $(


this


).attr(


'href'


);


//获取a元素的href属性值



$(id).addClass(


'active'


).siblings(


'.active'


).removeClass(


'active'


);

})




查看下切换效果截图：



wKioL1gZkQywxhxDAAAWCgX4TLU834.png






wKioL1gZkS-j5VmXAAAk_TkgEK0556.png



wKiom1gZkT-Dt7OJAAAx0C3Gp10248.png

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1868493