jQuery汽车品牌按字母分类锚点导航

来源：互联网 2023-03-16 23:54:58 版权归原作者所有，如有侵权，请联系我们

jQuery汽车品牌按字母分类锚点导航

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

jQuery汽车品牌按字母分类锚点导航

新建html文档。

jQuery汽车品牌按字母分类锚点导航

2相关内容未经许可获取自百度经验

书写hmtl代码。

div class="brand_wrap mt10 clearfix">

div class="brand_left">

div class="brand_head">品牌/div>

div class="brand_nav">

div class="brand_side">

div class="numA-Z"> a href="#" class="active">A/a> 良巨a href="#">B/a> a href="#">C/a> a href="#">D/a> a href="#">F/a> a href="#">G/a> a href="#">H/a> a href="#">J/a> a href="#">K/a> a href="#">L/a> a href="#">M/a> a href="#">N/a> a href="#">O/a> a href="#">Q/a> a href="#">R/a> a href="#">S/a> a href="#">T/a> a href="#">W/a> a href="#">X/a> a href="#">Y/a> a href="#">Z/a> /div>

/div>

div class="brand_col">

div class="brand_list">

ul class="list_cont">

li class="name">A/li>

冲况艳li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="a1">

ul>

li class="a2">a href="#">一汽大众/a>/li>

li class="menu_li">a href="#">奥迪Q3/a>/li>

li class="menu_li menu_no">a href="#">奥迪Q3/a>/li>

li class="a2">a href="#">一汽大众/a>/li>

li class="menu_li">a href="#">奥迪Q3/a>/li>

li class="menu_li menu_no">a href="#">奥迪Q3/a>/li>

/ul>

/li>

毙互li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="a1">

ul>

li class="a2">a href="#">一汽大众/a>/li>

li class="menu_li">a href="#">奥迪Q3/a>/li>

li class="menu_li menu_no">a href="#">奥迪Q3/a>/li>

li class="a2">a href="#">一汽大众/a>/li>

li class="menu_li">a href="#">奥迪Q3/a>/li>

li class="menu_li menu_no">a href="#">奥迪Q3/a>/li>

/ul>

/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="a1">

ul>

li class="a2">a href="#">一汽大众/a>/li>

li class="menu_li">a href="#">奥迪Q3/a>/li>

li class="menu_li menu_no">a href="#">奥迪Q3/a>/li>

li class="a2">a href="#">一汽大众/a>/li>

li class="menu_li">a href="#">奥迪Q3/a>/li>

li class="menu_li menu_no">a href="#">奥迪Q3/a>/li>

/ul>

/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">B/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">C/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">D/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">F/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">G/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">H/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">J/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">K/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">L/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">M/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">N/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">O/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">Q/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">R/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">S/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">T/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">W/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">X/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">Y/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

li class="name">Z/li>

li>a href="#">span class="sign">img src="images/audi.png">/span>奥迪/a>/li>

/ul>

/div>

jQuery汽车品牌按字母分类锚点导航

书写css代码。

.brand_col { width: 188px; margin: 0 0 0 37px; }

.brand_col .brand_list { width: 188px;height:600px; margin: 0; display: block; overflow-y: scroll; }

.brand_col .list_cont li { display: block; border-bottom: 1px solid #e6e6e6; height: 31px; line-height: 31px; }

.brand_col .list_cont li a { display: block;}

.brand_col .list_cont li a:hover { color: #3697db; text-decoration: none; background-color:#eff2f5; }

.brand_col .list_cont .sign { width: 31px; height: 31px; float: left; display: inline; margin: 0 7px;}

.brand_col .list_cont .name { height: 23px; background: #eff2f5; line-height: 22px; padding-left: 10px;}

.brand_col .list_cont .a2 { padding-left: 28px; height: 24px; line-height: 24px; }

.brand_col .list_cont .menu_li { padding-left: 46px; height: 24px; line-height: 24px; }

.brand_col .list_cont .menu_li a { width: 93px; height: 18px; display: inline-block; line-height: 18px; padding: 0 2px; }

.brand_col .list_cont .menu_li a:hover { background: #3697db; color: #FFF; text-decoration: none; }

.brand_col .list_cont .a1 { height: auto; padding-left: 0; display:none }

.brand_col .list_cont .a1 ul { padding:0; margin: 8px 0; background: url("../images/line05.png") repeat-y 10px top }

.brand_col .list_cont .a1 li { border-bottom: 0; }

.brand_col .list_cont .a2 { background: url("../images/line01.png") no-repeat;}

.brand_col .list_cont .a2 a:hover { background-color: #FFF;}

.brand_col .list_cont .menu_li { line-height: 20px; height: 21px; background: url("../images/line03.png") no-repeat 32px top;}

.brand_col .list_cont .menu_no { background: url("../images/line06.png") no-repeat 32px bottom;}

/*bread_nav*/

.bread_nav { display: block; height: 20px; width: 980px; margin: 10px auto 0 auto; }

.bread_nav .nav_l { float: left; font: 14px/20px "Microsoft YaHei"; color: #838383; }

.bread_nav .nav_l a { color: #3697db; }

.bread_nav .nav_l em { padding: 0 5px; font-family: "SimSun"; }

jQuery汽车品牌按字母分类锚点导航

书写并添加js代码。

script src="js/select-car.js">/script>

script src="js/jquery.min.js">/script>

jQuery汽车品牌按字母分类锚点导航

代码整体结构。

jQuery汽车品牌按字母分类锚点导航

查看效果。

jQuery汽车品牌按字母分类锚点导航

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：jQuery手机端酒店预订日期选择下一篇：jQuery上下滑动选项卡效果

jQuery汽车品牌按字母分类锚点导航

工具/原料

方法/步骤

热门文章

标签列表