H5 iframe应用总结1 + 选项卡 .eq($(this).index())

采用iframe有它的便捷之处，如下图左侧的选项对应各自右侧主体部分，iframe可以让右侧主体部分单独拎出去写，每一个选项可以对应单独一个html，方便快捷。

采用iframe有几点需要注意的

<iframe style="width:100%;height:100%;background:#f2f2f2;"" id="mainFrame" name="mainFrame"  scrolling="no" frameborder="0" src="./html/index2.html"></iframe>

• 首先iframe一定要有id=“mainFrame” name=“mainFrame”；

• 第二点在a标签中一定要有target=“mainFrame”，其中的mainFrame就是iframe标签中

的id。

<a class="xuan" href="./html/index2.html" target="mainFrame">系统首页</a>

 <div class="btm_part">
    <!-- xia left -->
    <div class="btm_left">
      <ul>
        <li class="li_xuan li_xuan_1">
            <img class="x_pic" src="./html/styles/img/shoiye@2x.png" alt="">
            <a class="xuan" href="./html/index2.html" target="mainFrame">系统首页</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/qiangdan@2x.png" alt="">
            <a class="xuan" href="./html/grab.html" target="mainFrame">抢单管理</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/jilui@2x.png" alt="">
            <a class="xuan" href="./html/grabjilu.html" target="mainFrame">抢单记录</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/lihsi@2x.png" alt="">
            <a class="xuan" href="./html/grabhistory.html" target="mainFrame">抢单历史记录</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/baozhengjin@2x.png" alt="">
            <a class="xuan" href="./html/bzjchongzhi.html" target="mainFrame">保证金充值</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/zhuanji@2x.png" alt="">
            <a class="xuan" href="./html/bzjzhuanyi.html" target="mainFrame">保证金转移</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/liushui@2x.png" alt="">
            <a class="xuan" href="./html/bzjliushui.html" target="mainFrame">保证金流水</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/tuandui@2x.png" alt="">
            <a class="xuan" href="./html/team.html" target="mainFrame">团队奖励金</a>
        </li>
        <li class="li_xuan">
            <img class="x_pic" src="./html/styles/img/lianxi@2x.png" alt="">
            <a class="xuan" href="./html/kefu.html" target="mainFrame">联系客服</a>
        </li>
      </ul>
    </div>
    <!-- xia right -->
    <div class="btm_right">
        <iframe style="width:100%;height:100%;background:#f2f2f2;"" id="mainFrame" name="mainFrame" scrolling="no" frameborder="0" src="./html/index2.html">
        </iframe>
    </div>
  </div>

下面的JS代码是左侧选项选中状态的代码块。

• 其中结合 .eq($(this).index())可以达到选项卡的效果，.eq($(this).index())之前是选中前的效果，
  .eq($(this).index())后面是选中后的效果。

<script>
// 左侧
$(".li_xuan").click(function(){
    console.log($(this).index())
    $(".li_xuan").css("background","#0060ff")
    .eq($(this).index()).css("background","#7ea4e0")
    $(".li_xuan").css("border-left","5px solid transparent")
    .eq($(this).index()).css("border-left","5px solid #fff")
    // 5px solid transparent-------选中前
    // 5px solid #fff------------------选中后
});
</script>