级联菜单和tab页的 jquery实现--第一步第二部

最新推荐文章于 2024-05-23 09:51:11 发布

静山晚风

最新推荐文章于 2024-05-23 09:51:11 发布

阅读量1.2k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/cgwcgw_/article/details/45220215

版权

Jquery 专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<html>
<head>
	<title>3434</title>
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
    	jQuery(function(){
    		var jsonAll ='';
	    	jQuery("select").change(function(){
	    		if(jsonAll && jQuery(this).val() !="Select" && jQuery(this).is("#sheng")){
					var json= jsonAll[$(this).val()];
					$(this).next("select").find("option").not(":contains(Select)").remove();
					for (var i = 0; i <json.length ; i++) {
		    			$(this).next("select").append("<option value="+json[i]+">"+json[i]+"</option>");
		    		};
	    		}
	    	});
	    	function initData(){
	    		var arr= [11,12,13];
	    		var arr2= [21,22,23];
	    		var json={
	    			"1":arr,
	    			"2":arr2,
	    		}
	    		jsonAll = eval(json)
	    		
	    	};
	    	initData();
    	});
    	
    </script>
</head>
<body>
<div>
<select id='sheng'>
	<option value='Select'>Select</option>
	<option value='1'>1</option>
	<option value='2'>2</option>
</select>
<select id='shi'>
	<option value='Select' >Select</option>
</select>
</div>
</body>
</html>

<html>
<head>
	<title>3434</title>
    <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript">
    	jQuery(function(){
    		jQuery(".tab li").bind("click",function(){
    			var index = jQuery(".tab li").index(jQuery(this));
    			jQuery(this).parents(".tab").next(".content").find("div").eq(index).show().siblings().hide();
    		});
    		function init(){
	    		jQuery(".content div").hide();
	    	};
	    	init();
    	});
    </script>
    <style type="text/css">
    	.tab{
    		width: 300px;
    		height: 30px;
    	}
    	.tab li{
    		float: left;
    		border: 1px solid gray;
    	}
    	.tab .clear{
    		clear: both;
    	}
    	.content{
    		border: 1px solid gray;
    		width: 300px;
    		height: 300px;
    	}
    </style>
</head>
<body>
<div>
	<div class='tab'>
		<ul >
			<li >语文</li>
			<li >数学</li>
			<li >物理</li>
			<li class='clear'></li>
		</ul>
	</div>
	<div class="content">
		<div>语文</div>
		<div>数学</div>
		<div>物理</div>
	</div>
</div>
</body>
</html>

<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></scri{pt>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<style type="text/css">
.array {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:transparent transparent transparent gray;
border-style:dashed dashed dashed solid;
border-width:15px;
}
.float{
float:left;
}
.cls{
clear:both;
}
.getback,.byemail{
width: 100px;
height: 30px;
background: gray;
}
.selected{
border-color:transparent transparent transparent red;
background: red;
}
</style>
<script type="text/javascript">
$(function(){
function init(){
$(".content > div").hide().eq(0).show();
$(".nav div").eq(0).addClass("selected").next("div").addClass("selected");
}
$("input[type=button]").click(function(){
if($(this).is("input[value=next]")){
$(".content > div").eq(0).hide().end().eq(1).show();
$(".nav > div").eq(0).removeClass("selected").next("div").removeClass("selected").next("div").addClass("selected").next("div").addClass("selected");
}
if($(this).is("input[value=prev]")){
$(".content > div").eq(1).hide().end().eq(0).show();
$(".nav > div").eq(2).removeClass("selected").next("div").removeClass("selected").end().end().eq(0).addClass("selected").next("div").addClass("selected");
}
});

init();
});
</script>
</head>
<body>
<div class='nav'>

<div class="getback float">找回基本信息</div>
<div class="array float"></div>
<div class="byemail float">填写找回邮箱</div>
<div class="array float"></div>
<div class="cls"></div>
</div>
<div class="content">

<div class="base1">
<br><br>获取信息1：
<input type="button" value='next'>
</div>
<div class="base2">
<br>获取信息2：
<input type="button" value='prev'>
</div>
</div>
</body>
</html>