Ext TabPanel鼠标在tab标签上滑动时切换tab示例

 

 

通过查看tabpanel源码中关于鼠标点击的切换方法,改成鼠标滑动时切换.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap是一个流行的前端开发框架,它提供了丰富的组件和样式,可以帮助开发者快速构建响应式网页。在Bootstrap中,Tab切换是一种常见的交互方式,可以让用户在不同的选项卡之间进行切换。 要实现竖向的Tab切换,可以借助Bootstrap的Navs组件和Tabs组件。下面是一个简单的示例代码: ```html <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills flex-column" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a> </li> <li class="nav-item"> <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a> </li> </ul> </div> <div class="col-md-9"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab"> Content for Tab 1 </div> <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab"> Content for Tab 2 </div> <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab"> Content for Tab 3 </div> </div> </div> </div> </div> ``` 在上面的代码中,我们使用了`nav`和`tab-content`两个组件来实现Tab切换。`nav`组件用于显示选项卡,`tab-content`组件用于显示对应选项卡的内容。 首先,我们创建一个具有`flex-column`类的`ul`元素,这样可以使选项卡垂直排列。每个选项卡都是一个`li`元素,其中的`a`元素用于触发切换。通过设置`data-toggle="tab"`属性和`href`属性来关联选项卡和对应的内容。 然后,我们创建一个具有`tab-content`类的`div`元素,其中的每个子元素都是一个选项卡的内容。通过设置`id`属性和`aria-labelledby`属性来关联内容和对应的选项卡。 最后,我们使用Bootstrap提供的CSS类来设置选项卡和内容的样式,例如使用`active`类来标记默认显示的选项卡。 通过以上代码,我们就可以实现一个简单的竖向Tab切换效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值