189 8069 5689

jQuery菜单切换

一、标签切换   

10多年的锦江网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整锦江建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“锦江网站设计”,“锦江网站推广”以来,每个客户项目都认真落实执行。



	
		
		
		
		
		
	
	
		
			标签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"); %>


    标题名称:jQuery菜单切换
    URL分享:http://cdxtjz.cn/article/pspdop.html

    其他资讯