jqueryWEUI导航栏设计出错?

我用的是jquery weui的基础组件导航栏,然后在其中套入我的代码,结果功能出现异常,不能正常跳转页面。各位大神帮我看看
这是jquery WEUI导航栏的原始代码:
<div class="weui-tab">
<div class="weui-navbar">

<a class="weui-navbar__item weui-bar__item--on" href="#tab1">
  选项一
</a>
<a class="weui-navbar__item" href="#tab2">
  选项二
</a>
...

</div>
<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">
  <h1>页面二</h1>
</div>
...

</div>
</div>

这是我套用后的代码:
<div class="weui-tab">
<div class="weui-navbar">

<a class="weui-navbar__item weui-bar__item--on" href="#tab1">
  全部
</a>
<a class="weui-navbar__item" href="#tab2">
  待支付
</a>

  已成功
</a>

</div>
<!----------------导航页面------------------>
<div class="weui-tab__bd">

<!--页面一-->    
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
  <div class="order">
    <div class="order-left">订单编号:<span>123456789</span>
    </div>
    <span class="order-right">待支付</span>
  </div>
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"></div>
    <div class="weui-panel__bd">
      <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
          <img class="weui-media-box__thumb" src="../../images/top_bro.png">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">友咪哒VIP资格申请</h4>
          <p class="weui-media-box__desc"><p class="font-red order-vip-left">¥ 20000.00</p><p class="order-vip-right">×1</p></p>
        </div>
      </a>  
    </div>
    <div class="total"><span class="right">¥1000.00</span><span class="font-gray right">共1件 合计 </span></div>
    <div class="btn">
      <button class="btn-pay" style="border:1px solid #ff7f20;">立即支付</button>
      <button class="btn-del" style="border:1px solid #ff7f20;">删除订单</button>
    </div>
  </div>
</div>
<!--页面二-->        
 <div id="tab2" class="weui-tab__bd-item">
  <div class="order">
    <div class="order-left">订单编号:<span>123456789</span>
    </div>
    <span class="order-right">待支付</span>
  </div>
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"></div>
    <div class="weui-panel__bd">
      <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
          <img class="weui-media-box__thumb" src="../../images/top_bro.png">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">友咪哒VIP</h4>
          <p class="weui-media-box__desc"><p class="font-red order-vip-left">¥ 20000.00</p><p class="order-vip-right">×1</p></p>
        </div>
      </a>  
    </div>
    <div class="total"><span class="right">¥1000.00</span><span class="font-gray right">共1件 合计 </span></div>
    <div class="btn">
      <button class="btn-pay" style="border:1px solid #ff7f20;">立即支付</button>
      <button class="btn-del" style="border:1px solid #ff7f20;">删除订单</button>
    </div>
  </div>
</div>
<!--页面三-->    
 <div id="tab3" class="weui-tab__bd-item">
  <div class="order">
    <div class="order-left">订单编号:<span>123456789</span>
    </div>
    <span class="order-right">待支付</span>
  </div>
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"></div>
    <div class="weui-panel__bd">
      <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
          <img class="weui-media-box__thumb" src="../../images/top_bro.png">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">友咪哒</h4>
          <p class="weui-media-box__desc"><p class="font-red order-vip-left">¥ 20000.00</p><p class="order-vip-right">×1</p></p>
        </div>
      </a>  
    </div>
    <div class="total"><span class="right">¥1000.00</span><span class="font-gray right">共1件 合计 </span></div>
    <div class="btn">
      <button class="btn-pay" style="border:1px solid #ff7f20;">立即支付</button>
      <button class="btn-del" style="border:1px solid #ff7f20;">删除订单</button>
    </div>
  </div>
</div>

</div>

阅读 3.2k
1 个回答

缺乏js文件

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题