ajax异步加载html片段

最新推荐文章于 2021-07-01 18:18:28 发布

VIP文章 this_ITBoy

最新推荐文章于 2021-07-01 18:18:28 发布

阅读量9.7k

点赞数 3

文章标签： ajax html 导航

本文链接：https://blog.csdn.net/this_itboy/article/details/50906185

版权

案例：在一个导航栏中，实现点击导航出现不同的选择区域，如图：

比较容易想到的是将右边的内容放在一个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="&#xe604;"></em></a>
       <div class="searchBox">
           <input type="text" class="chooseGoods"placeholder="搜索惊喜更多！">
           <em class="icon26 searchGoods" data-icon="&#xe90a;"></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

最低0.47元/天解锁文章

this_ITBoy

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ajax异步加载html片段

案例：在一个导航栏中，实现点击导航出现不同的选择区域，如图：比较容易想到的是将右边的内容放在一个div里面，然后左边的每个li点击的时候，右边相应的div显示出来，而其他的div隐藏，这样就要在一个页面里面设置多个div，然后控制div的显示和隐藏。这里我觉得用ajax异步加载html片段也是一个可行的方法，把右边的div提取出来写成页面片段，然后用ajax异步去获取相应
复制链接

扫一扫