正文
css联动样式,链接式css样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
什么是html5纯CSS的三级联动级联菜单
给你一个JQ的三级联动：
!doctype html
html
head
title/title
meta charset = "utf-8"/
/head
style
/style
body
select id="one"
option value=""请选择省份/option
/select
select id="two"
option value=""请选择城市/option
/select
select id="three"
option value=""请选择区域/option
/select
script type="text/javascript" src="js/jquery-1.12.0.js"/script
script type="text/javascript"
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
];
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index();
var two_index = $("#two option:selected").index();
var three = $("#three");
three.empty().append("option请选择区域/option");
if(two_index 0){
var area = province[one_index-1].city[two_index-1].area;
for(var i = 0 ; i area.length ; i++){
three.append("option"+area[i]+"/option");
}
}
});
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index();
var two = $("#two");
console.log(one_index)
two.empty().append("option请选择城市/option");
$("#three").empty().append("option请选择区域/option");//清除
if(one_index 0){
var city = province[one_index-1].city;
console.log(province[one_index-1].city)
for(var i = 0 ; i city.length ; i++){
two.append("option"+city[i].name+"/option");
}
}
});
init();
function init(){
for(var i = 0 ; i province.length ; i++){
$("#one").append("option"+province[i].name+"/option");
}
}
});
/script
/body
/html
相关问答
Q1: CSS，滚动条的制作方式（横向与竖向联动），请问有盆友会吗？灰常感谢！
很简单的滚动样式：
div.scroll{
scrollbar-arrow-color: #326BAB; /*三角箭头的颜色*/
scrollbar-face-color: #CAEAFC; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #98D1F5; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #CAEAFC; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #98D1F5; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #CAEAFC; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #C9E1F9; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
}
够详细了吧
如果你要很个性化的样式，就用jQuery的滚动条插件吧
Q2: css兼容多中浏览器的横竖向下拉菜单
这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
Q3: jquery的css方法更改样式，怎么在改变的过程中加点过渡动画？能举个例子吗？谢谢！
这里主要有以下几种方法：
一、在显示和隐藏的时候，可以设置显示隐藏的时间，$("#id").show("500")和$("#id").hide("500")，这样看上去有一个过渡的效果。
二、在菜单（尤其的联动菜单时）的下拉和收起时，使用$("#id").slideDown("500")和slideUp("500")，可以设置时间的长短。
三、一般的动画过渡用$("#id").animate()这个方法。如楼上的animate(({
opacity
:
"0.3"
},500)。
希望可以绑到你！
