案例:在一个导航栏中,实现点击导航出现不同的选择区域,如图:
比较容易想到的是将右边的内容放在一个div里面,然后左边的每个li点击的时候,右边相应的div显示出来,而其他的div隐藏,这样就要在一个页面里面设置多个div,然后控制div的显示和隐藏。
这里我觉得用ajax异步加载html片段也是一个可行的方法,把右边的div提取出来写成页面片段,然后用ajax异步去获取相应的html片段。
主页面的HTML代码如下:
<body> <header class="header" id="header"> <a href="javascript:history.go(-1);" class="back"><em class="icon30" data-icon=""></em></a> <div class="searchBox"> <input type="text" class="chooseGoods"placeholder="搜索惊喜更多!"> <em class="icon26 searchGoods" data-icon=""></em> </div> <div class="searchMeun"> <ul class="mu"> <li><a href="#" rel="nofollow" class="hovLoad"><span>儿童寝居</span><em class="icon20 arr" data-icon=""></em></a></li> <li><a href="#" rel="nofollow" class="hovLoad"><span>儿童玩具</span