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

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写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'; }

书写并添加js代码。

代码整体结构。

查看效果。