效果：
源码：
index.html
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>百度星座</title> ???<style type="text/css"> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.clearfix:after{ ???????????content: ""; ???????????display: block; ???????????clear: both; ???????????height: 0; ???????????line-height: 0; ???????????visibility: hidden; ???????} ???????.clearfix{ ???????????zoom: 1; ???????} ???????ul{ ???????????list-style: none; ???????} ???????button{ ???????????border: none; ???????????outline: none; ???????????cursor: pointer; ???????} ???????body{ ???????????background: url("img/bg.jpg") no-repeat; ???????????background-size: cover; ???????????-webkit-background-size: cover; ???????} ???????.logo{ ???????????width: 270px; ???????????margin: 30px auto 0; ???????} ???????.logo img{ ???????????width: 270px; ???????????height: 129px; ???????} ???????.links{ ???????????width: 600px; ???????????margin: 0px auto; ???????} ???????.links li{ ???????????float: left; ???????} ???????.links li a{ ???????????color: #fff; ???????????padding: 0 10px; ???????} ???????.search{ ???????????width: 640px; ???????????margin: 10px auto; ???????} ???????.search input{ ???????????width: 536px; ???????????height: 40px; ???????????border: none; ???????????outline: none; ???????} ???????.search button{ ???????????width: 104px; ???????????height: 40px; ???????????background-color: #DDD; ???????} ???????.container{ ???????????width: 888px; ???????????margin: 40px auto; ???????} ???????.container .menu{ ???????????float: left; ???????????width: 80px; ???????????height: 318px; ???????????background-color: rgba(0,0,0,.4 ); ???????} ???????.container .menu a{ ???????????display: block; ???????????font-weight: bold; ???????????color: #fff; ???????????text-decoration: none; ???????????width: 80px; ???????????height: 35px; ???????????line-height: 35px; ???????????text-align: center; ???????} ???????.container .menu a.active{ ???????????background-color: #A4A5A7; ???????} ???????.container .card{ ???????????float: left; ???????????margin-left: 20px; ???????????width: 768px; ???????????height: 278px; ???????????background-color: rgba(255,255,255,.6); ???????????padding: 20px 0 20px 20px; ???????} ???????.container .card li{ ???????????width: 170px; ???????????height: 50px; ???????????border: 1px solid #fff; ???????????float: left; ???????????margin: 0px 20px 20px 0; ???????????/*background: url("img/xingzuo.png") no-repeat 0 0;*/ ???????????position: relative; ???????} ???????.container .card li a{ ???????????display: block; ???????????width: 100px; ???????????height: 30px; ???????????padding: 3px 0 10px 70px; ???????????text-decoration: none; ???????????color: #000; ???????} ???????.container .card li div{ ???????????position: absolute; ???????????top: -1px; ???????????right: -1px; ???????????height: 0; ???????????width: 30px; ???????????height: 30px; ???????????background: url("img/xingzuo.png") no-repeat 0 -624px; ???????????cursor: pointer; ???????????display: none; ???????} ???????.container .card li div.mark{ ???????????display: block; ???????} ???????.container .card .bottom{ ???????????border-top: 1px solid #fff; ???????????width: 748px; ???????} ???????.container .card .bottom button{ ???????????display: block; ???????????width: 80px; ???????????height: 30px; ???????????color: #fff; ???????????background-color: #389CFF; ???????????margin: 20px auto; ???????} ???</style> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript" src="index.js"></script></head><body><div class="logo"> ???<img src="img/logo_white.png" alt=""></div><div class="links clearfix"> ???<ul> ???????<li><a href="http://news.baidu.com" target="_blank">新闻</a></li> ???????<li><a href="http://www.baidu.com" target="_blank">网页</a></li> ???????<li><a href="http://tieba.baidu.com" target="_blank">贴吧</a></li> ???????<li><a href="http://zhidao.baidu.com" target="_blank">知道</a></li> ???????<li><a href="http://music.baidu.com" target="_blank">音乐</a></li> ???????<li><a href="http://image.baidu.com" target="_blank">图片</a></li> ???????<li><a href="http://v.baidu.com" target="_blank">视频</a></li> ???????<li><a href="http://map.baidu.com" target="_blank">地图</a></li> ???????<li><a href="http://baike.baidu.com" target="_blank">百科</a></li> ???????<li><a href="http://wenku.baidu.com" target="_blank">文库</a></li> ???????<li><a href="http://www.baidu.com/more/" target="_blank">更多>></a></li> ???</ul></div><div class="search"> ???<input type="text" name="question"><button type="submit">百度一下</button></div><div class="container"> ???<div class="menu"> ???????<ul> ???????????<li><a href="javascript:;">导航</a></li> ???????????<li><a href="javascript:;">音乐</a></li> ???????????<li><a href="javascript:;">新闻</a></li> ???????????<li><a href="javascript:;" class="active">星座</a></li> ???????</ul> ???</div> ???<div class="card"> ???????<div class="xingzuo clearfix" id="xz"></div> ???????<div class="bottom"> ???????????<button>确定</button> ???????</div> ???</div></div></body></html>index.js
$(function () { ???var datas = [{ ???????name : "白羊座", ???????date : "3.21-4.19" ???},{ ???????name : "金牛座", ???????date : "4.20-5.20" ???},{ ???????name : "双子座", ???????date : "5.21-6.21" ???},{ ???????name : "巨蟹座", ???????date : "6.22-7.22" ???},{ ???????name : "狮子座", ???????date : "7.23-8.22" ???},{ ???????name : "处女座", ???????date : "8.23-9.22" ???},{ ???????name : "天秤座", ???????date : "9.23-10.23" ???},{ ???????name : "天蝎座", ???????date : "10.24-11.22" ???},{ ???????name : "射手座", ???????date : "11.23-12.21" ???},{ ???????name : "摩羯座", ???????date : "12.22-1.19" ???},{ ???????name : "水瓶座", ???????date : "1.20-2.18" ???},{ ???????name : "双鱼座", ???????date : "2.19-3.20" ???}]; ???var str = "<ul>"; ???for(var i=0;i<datas.length;i++){ ???????str += "<li>"; ???????str += "<a href=‘#‘>"+datas[i].name+"<br>"+datas[i].date+"</a>"; ???????str += "<div></div></li>"; ???} ???str += "</ul>"; ???$("#xz").html(str); ???$("#xz li").each(function (i) { ???????$("#xz li:eq("+i+")").css("background","url(‘img/xingzuo.png‘) no-repeat 0 -"+(52*i)+"px"); ???}) ???$("#xz li").click(function () { ???????$(this).children("div").toggleClass("mark"); ???});})图片：
jquery ?json实现面向对象 百度十二星座
原文地址：https://www.cnblogs.com/alex-xxc/p/10085801.html