tabbar和navbar不能嵌套使用

[yll690]

嵌套使用（把navbar放在了tabbar的某一页中），点击navbar的按钮，会导致除了tabbar底部导航栏、其余内容都消失，因为在navbar对应的容器被激活（weui-tab__bd-item--active）时，其他容器（包括tabbar的容器）都被取消激活状态了 下面的代码就是官方示例，只是把navbar放到了tabbar的第二页中

`

<div class="weui-tab">
  <div class="weui-tab__bd">
    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
      <h1>页面一</h1>
    </div>
    <div id="tab2" class="weui-tab__bd-item">
        <div class="weui-tab">
            <div class="weui-navbar">
              <a class="weui-navbar__item weui-bar__item--on" href="#tab5">
                选项一
              </a>
              <a class="weui-navbar__item" href="#tab6">
                选项二
              </a>
              <a class="weui-navbar__item" href="#tab7">
                选项三
              </a>
            </div>
            <div class="weui-tab__bd">
              <div id="tab5" class="weui-tab__bd-item weui-tab__bd-item--active">
                <h1>页面一</h1>
              </div>
              <div id="tab6" class="weui-tab__bd-item">
                <h1>页面二</h1>
              </div>
              <div id="tab7" class="weui-tab__bd-item">
                <h1>页面三</h1>
              </div>
            </div>
          </div>
    </div>
    <div id="tab3" class="weui-tab__bd-item">
      <h1>页面三</h1>
    </div>
    <div id="tab4" class="weui-tab__bd-item">
      <h1>页面四</h1>
    </div>
  </div>

  <div class="weui-tabbar">
    <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
      <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_button.png" alt="">
      </div>
      <p class="weui-tabbar__label">微信</p>
    </a>
    <a href="#tab2" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_msg.png" alt="">
      </div>
      <p class="weui-tabbar__label">通讯录</p>
    </a>
    <a href="#tab3" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_article.png" alt="">
      </div>
      <p class="weui-tabbar__label">发现</p>
    </a>
    <a href="#tab4" class="weui-tabbar__item">
      <div class="weui-tabbar__icon">
        <img src="./images/icon_nav_cell.png" alt="">
      </div>
      <p class="weui-tabbar__label">我</p>
    </a>
  </div>
</div>

<script src="../lib/jquery-2.1.4.js"></script>

<script>
  $("#a").select({
    title: "选择职业",
    items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
  });
</script>

`

[yll690]

解决了，修改一下showTab函数即可，注释掉的是原来的，注释下面的是改的 ` var showTab = function(a) { var $a = $(a); if($a.hasClass(ITEM_ON)) return; var href = $a.attr("href");

if(!/^#/.test(href)) return ;

//$a.parent().find("."+ITEM_ON).removeClass(ITEM_ON);
$a.parent().children("."+ITEM_ON).removeClass(ITEM_ON);

$a.addClass(ITEM_ON);

//var bd = $a.parents(".weui-tab").find(".weui-tab__bd");
//bd.find(".weui-tab__bd-item--active").removeClass("weui-tab__bd-item--active");
$a.parent().parent().children(".weui-tab__bd").children(".weui-tab__bd-item--active").removeClass("weui-tab__bd-item--active");

$(href).addClass("weui-tab__bd-item--active");

} `

[yll690]

这个代码区的识别有毒

[hjshiwbd]

markdown语法，试试这种行不

[clhui]

解决了，修改一下showTab函数即可，注释掉的是原来的，注释下面的是改的 ` var showTab = function(a) { var $a = $(a); if($a.hasClass(ITEM_ON)) return; var href = $a.attr("href");

if(!/^#/.test(href)) return ;

//$a.parent().find("."+ITEM_ON).removeClass(ITEM_ON); $a.parent().children("."+ITEM_ON).removeClass(ITEM_ON);

$a.addClass(ITEM_ON);

//var bd = $a.parents(".weui-tab").find(".weui-tab__bd"); var bd = $a.parentsUntil(".weui-tab").find(".weui-tab__bd");//使用parentsUntil这个找到最亲近的父元素 bd.find(".weui-tab__bd-item--active").removeClass("weui-tab__bd-item--active");

$(href).addClass("weui-tab__bd-item--active"); }