防汽车之家带字母分类特效jquery

最新推荐文章于 2021-10-19 13:35:22 发布

NeveFail

最新推荐文章于 2021-10-19 13:35:22 发布

阅读量831

点赞数 1

分类专栏： javascript 文章标签： jquery css

本文链接：https://blog.csdn.net/localhost_xiao/article/details/54289069

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
</head>
<style>
h1 a{margin-left: 10px;}
</style>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>

var json = {
"BM1":"宝马",
"BM2":"宝马x8",
"BM3":"宝马x6",
"BC4":"奔驰so",
"AD5":"奥迪",
"AD6":"奥迪1",
"CC7":"卡丁车1",
"CC8":"卡丁车2",
"CC9":"卡丁车3",
"DD11":"大众1",
"DD22":"大众2",
"DD33":"大众3",
"DD44":"大众4",
"EE55":"伊利1",
"EE66":"伊利2",
"EE77":"伊利3",
"EE88":"伊利4",
"FF99":"丰田1",
"FF12":"丰田2",
"FF13":"丰田3",
"FF14":"丰田4",
"FF15":"丰田5",
"GG16":"旮旯里1",
"GG17":"旮旯里2",
"GG18":"旮旯里3",
"HH19":"回火1",
"HH10":"回火2",
"HH1":"回火3",
"HH2":"回火4",
"II3":"以i2",
"II4":"以i3",
"II5":"以i4",
"II6":"以i5"
}
$(function(){
var arr = ["A","B","C","D","E","F","G","H","I"];
var html = "";
var data = "";
for (var i = 0 ; i<arr.length ; i++) {
html += ' <a href="javascript:;">'+arr[i]+'</a>';
}
$(".A").append("<h1>"+html+"</h1>");
$(".A").find("a").each(function(){
$(this).click(function(){
data = "";
for (var v in json ) {
if(v.charAt(0)==$(this).text()){

data +="<h2>"+json[v]+"</h2>";

}
}
$(".B").html(data);
})

})

for(var v in json){
if(v.charAt(0)=="A"){
data +="<h2>"+json[v]+"</h2>";
}
}
$(".B").html(data);
})
</script>
<body>
<div class="A">

</div>
<div class="B">

</div>

</body>
</html>

NeveFail

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
防汽车之家带字母分类特效jquery

h1 a{margin-left: 10px;}var json = {"BM1":"宝马","BM2":"宝马x8","BM3":"宝马x6","BC4":"奔驰so","AD5":"奥迪","AD6":"奥迪1","CC7":"卡丁车1","CC8":"卡丁车2","CC9":"卡丁车3","DD11":"大众1","DD2
复制链接

扫一扫

专栏目录