1、效果如下图：

2前台页面

  
  
  
      
        Jquery标签页效果_脚本学堂_www.  
          
          
          
      
      
          
        
  
            
  
                
标签一
  
                
标签二
  
                
标签三
  
            
  
            
  
                我是标签一的内容
  
            
  
                我是标签二的内容
  
            
  
                我是标签三的内容
  
        
  
          
      
    

3、css样式表

  ul,li  
    {  
        list-style:none;  
        margin:0;  
        padding:0;  
        }  
    li  
    {  
        background-color:#6E6E6E;  
        float:left;  
        color:White;  
        padding:5px;  
        margin-right:3px;   
        border: 1px solid white;     
        }  
    .tabin  
    {  
        border:1px solid #6E6E6E;  
        }  
    #firstDiv div  
    {  
        clear:left;  
        background-color:#6E6E6E;  
        width:200px;  
        height:100px;  
        display:none;  
        }  
    #firstDiv .contentin  
    {  
        display:block;  
        }

4、js代码 tab.js

///   
    $(document).ready(function () {  
      
        var setTimeouId;  
      
        $("#firstDiv li").each(function (index) {  
            $(this).mouseover(function () {  
                var nodeTabin = $(this);  
                setTimeouId = setTimeout(function () {  
                    $("#firstDiv .contentin").removeClass("contentin");  
                    $("#firstDiv .tabin").removeClass("tabin");  
      
                    $("#firstDiv div").eq(index).addClass("contentin");  
                    //不应该再用this  this如果用在这里是指window，切记  
                    nodeTabin.addClass("tabin");  
                }, 300);  
            }).mouseout(function () {  
                clearTimeout(setTimeouId);  
            });  
        });  
    });

您可能感兴趣的文章: