练习 | JQuery基本练习

完整代码见 GitHub

---

题1：点击图片放大显示

点击图片列表中的某个元素，该图片放大显示

解

思路：
1.点击图片，放大指定图片，容器可见；需要设置阻止事件冒泡
2.点击其他区域，容器不可见

<!-- html代码 -->
  <div class="g-index">
    <div class="m-list">
      <div class="u-pic">1</div>
      ....
      <div class="u-pic">10</div>
    </div>
    <div class="u-box hide"></div>
  </div>

index.js

$('body').on('click', (e)=>{
   
   let $b = $(e.currentTarget).children();
   $b.eq(0).children().eq(1).addClass('hide');
})

$('body').on('click','.u-pic', (e)=>{
   
   picExpand(e);
   e.stopPropagation();
})

function picExpand(e) {
   
  let t = e.currentTarget;
  let len = $(t).parent().parent().children().length;
  let $d = $(t).parent().next();
  $d.removeClass('hide');
  // 移除原有图片
  $d.find('.u-pic').remove();
  // <div>内增加所选项内容 (浅拷贝，防止点一个少一个)
  $d.append($(t).clone()); 
}

---

题2：滑动门

页面的滑动门技术，即点击上方导航按钮，将按钮背景颜色设置为灰色，并且切换下方内容.

解

思路：
1.增加属性 data_id ，以便标签与内容相对应
2.点击对应区域后，变换上下元素类名

<!-- html代码 -->
	<div class="g-index">
    <div class="m-nav">
      <div class="u-tab focus" data_id="1"></div>
      <div class="u-tab" data_id="2"></div>
      <div class="u-tab" data_id="3"></div>
    </div> 
    <div class="g-bd">
      <div class="m-content" data_id="1">1</div>
      <div class=&