您的位置：首页 > Web前端 > JQuery

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

2015-04-23 12:48 323 查看

<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>

3

<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>

3

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航