jQuery菜单切换-创新互联-成都快上网建站

jQuery菜单切换-创新互联

一、标签切换

专注于为中小企业提供网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业五通桥免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。


	
		
		
		
		
		
	
	
		
			标签1
			
  • 标签2
  • 标签3
  • 内容1
    内容2
    内容3
    ul,li{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    li{
    	float: left;
    	background-color: #868686;
    	color: #FFFFFF;
    	padding: 5px;
    	margin-right: 2px;
    	border: 1px solid white;
    }
    
    .tabin{
    	background-color: #6e6e6e;
    	border: 1px solid #6e6e6e;
    }
    
    .contentfirst{
    	clear: both;
    	background-color: #6e6e6e;
    	color: #FFFFFF;
    	width: 300px;
    	height: 100px;
    	padding: 10px;
    	display: none;
    }
    
    .content{
    	display: block;
    }
    var timeoutid;
    $(document).ready(function(){
    	$("#tabfirst li").each(function(index){
    		var liNode = $(this);
    		$(this).mouseover(function(){
    			timeoutid=setTimeout(function(){
    				$("div.content").removeClass("content");
    				$("#tabfirst li.tabin").removeClass("tabin");
    				$("div").eq(index).addClass("content");
    				liNode.addClass("tabin");
    			},300)
    		}).mouseout(function(){
    			clearTimeout(timeoutid);
    		})
    	});
    });

    二、标签切换数据加载

    
    
    	
    		
    		
    		
    		
    		
    	
    	
    		
    			标签1
    			
  • 标签2
  • 标签3
  • 内容1
    内容2
    内容3 装载完整页面
  • 装载部分页面
  • 装载网络数据
  • ul,li{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    li{
    	float: left;
    	background-color: #868686;
    	color: #FFFFFF;
    	padding: 5px;
    	margin-right: 2px;
    	border: 1px solid white;
    }
    
    .tabin{
    	background-color: #6e6e6e;
    	border: 1px solid #6e6e6e;
    }
    
    .contentfirst{
    	clear: both;
    	background-color: #6e6e6e;
    	color: #FFFFFF;
    	width: 300px;
    	height: 100px;
    	padding: 10px;
    	display: none;
    }
    
    .content{
    	display: block;
    }
    
    #tabsecond li{
    	float: left;
    	background-color: #FFFFFF;
    	color: blue;
    	padding: 10px;
    	margin-right: 2px;
    	cursor: pointer;
    }
    
    #tabsecond li.tabin{
    	background-color: #f2f6f8;
    	border: 1px solid #000000;
    	border-bottom: 0;
    	z-index: 100;
    	position: relative;
    }
    
    #contentsecond{
    	width: 500px;
    	height: 200px;
    	padding: 10px;
    	background-color: #F2F6F8;
    	clear: left;
    	border: 1px solid #000000;
    	top: -2px;
    	position: relative;
    }
    var timeoutid;
    $(document).ready(function(){
    	$("#tabfirst li").each(function(index){
    		var liNode = $(this);
    		$(this).mouseover(function(){
    			timeoutid=setTimeout(function(){
    				$("div.content").removeClass("content");
    				$("#tabfirst li.tabin").removeClass("tabin");
    				$("div").eq(index).addClass("content");
    				liNode.addClass("tabin");
    			},300)
    		}).mouseout(function(){
    			clearTimeout(timeoutid);
    		})
    	});
    	
    	$("#realcontent").load("mytab.html");
    	$("#tabsecond li").each(function(index){
    		$(this).click(function(){
    			$("#tabsecond li.tabin").removeClass("tabin");
    			$(this).addClass("tabin");
    			if(index==0){
    				$("#realcontent").load("mytab.html");
    			}else if(index == 1){
    				$("#realcontent").load("mytab.html");
    			}else if(index == 2){
    				$("#realcontent").load("mytab.html");
    			}
    		})
    	})
    });
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    
    
    
    
    Insert title here
    
    
    	
    你好么???

    <% out.print("你好,这里是jsp"); %>

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    文章标题:jQuery菜单切换-创新互联
    浏览路径:http://kswjz.com/article/dipcdc.html
    扫二维码与项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流