网页标签页切换实现-优快云博客

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

HTML代码：

 
    
         <
         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代码：

 
   
         /*简单重置下样式*/
        
 
         *{
         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

 
         $(
         '#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'
         ); 
        
         })