Easyui 去除jquery-easui tab页div自带滚动条的方法

测试环境

jquery-easyui-1.5.3

需求场景

打开tab页面时，自动载入一个iframe页面，除了iframe页面本身会出现一个滚动条，tab标签页也出现一个滚动条，如下图所示，需求就是去掉tab页面的滚动条

解决方法

通过观察html页面结构，发现这个滚动条归属class为pannel-body的div

所以，解决方案，只需要添加样式即可。如下，带背景色内容：

<head>
……
<style type="text/css">
  /*去掉easyui tabs右侧滚动条*/
  #tabs .tabs-panels>.panel>.panel-body {
    overflow: hidden;
  }
</style>
</head>

总结

以上所述是小编给大家介绍的Easyui 去除jquery-easui tab页div自带滚动条,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Easyui 关闭jquery-easui tab标签页前触发事件的解决方法

    测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判断该tab页面是否可以关闭:获取子页面js中定义的taskStatus,如果taskStatu不为taskEnd,则表示任务还在执行,不让关闭 解决方法 给tab标签页增加onBeforeClose事件处理函数,如下: $(function(){ $('#tabs').tabs({ onBeforeClose: function(title,index){ if (title.indexOf

  • Easyui 去除jquery-easui tab页div自带滚动条的方法

    测试环境 jquery-easyui-1.5.3 需求场景 打开tab页面时,自动载入一个iframe页面,除了iframe页面本身会出现一个滚动条,tab标签页也出现一个滚动条,如下图所示,需求就是去掉tab页面的滚动条 解决方法 通过观察html页面结构,发现这个滚动条归属class为pannel-body的div 所以,解决方案,只需要添加样式即可.如下,带背景色内容: <head> -- <style type="text/css"> /*去掉easyu

  • jquery实现TAB选项卡鼠标经过带延迟效果的方法

    本文实例讲述了jquery实现TAB选项卡鼠标经过带延迟效果的方法.分享给大家供大家参考.具体如下: 如果你想实现鼠标停留在DIV上面N秒后才执行某些函数,或者类似下面的TAB切换时不经过之间的显示,用下面的方法可以实现. <!doctype html> <html> <head> <meta charset="utf-8"> <title>hoverTAB有延迟显示的效果</title> <style ty

  • easyui 中的datagrid跨页勾选问题的实现方法

    easyui 中的datagrid跨页勾选问题的实现方法

    easyui的datagrid分页显示数据,如果有需求要求勾选多条数据且不再同一页中,easyui会保存在其他页选中的数据吗? 一开始在网上查阅有人说easyui中没有此方法,需要自己写,但其实至少在1.4版本后只要在datagrid中加入   idField:'id',给每条数据id属性,easyui就默认就会保留之前勾选的信息,如果没有id,才会出现换页后,之前勾选的信息没有的情况.所以说网络是个好东西,但你要有分辨的能力! 下面是部分代码: $weldingBomInstanceGrid=

  • jQuery实现标签页效果实战（4）

    jQuery实现标签页效果实战（4）

    今天我们来完成<jQuery实战>系列的标签页效果.先来看一看效果图 这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果.在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容.当用户想看其他内容的时候不需要离开页面,只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容.门户网站的首页,有很多频道都是标签页的最佳案例,如体育.财经.军事等模块都是位于不同的标签上.上边的标签页一般称为滑动门技术,下面的内容是一次性加载进来,鼠标移

  • 用jQuery技术实现Tab页界面之二

    这是第二篇文章,第一篇可以参考Tab页界面,用jQuery及Ajax技术实现代码特点: 1,完全实现Tab逻辑功能,Tab的样式完全交由前端代码控制,很灵活. 2,tab页触发事件是click. 3,界面以table布局,只需要配置关键对象的class和id 即可工作. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

  • Tab页界面 用jQuery及Ajax技术实现(php后台)

    网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用.实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据). 自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕.代码如下,还在不断修改中. 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • Tab页界面，用jQuery及Ajax技术实现

    到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来.特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式. 网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用.实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据). 自己的开发的代码自己最清楚,用起

  • 基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

    1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2.   实践 HTML代码片段 <div class="container-fluid"> <div class="row"> <!--添加左侧菜单栏 --> <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> <div class

  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    本文分享了项目中使用Ace模板的菜单样式和基于iframe的Tab页效果. 一.效果展示 折腾了好久,终于将菜单样式和Tab页的效果从项目中抽出来了. 1.初始加载出来的效果 2.展开菜单(支持多级展开,后面代码介绍) 3.点击子菜单,以Tab页的形式打开对应的页面 4.支持菜单折叠 5.打开的菜单过多时自动换行显示,折叠后自适应 二.代码示例 有现成的东西用很方便的,总的来说Bootstrap Ace模板的功能还是比较强大的,并且支持各种终端设备.本文主要使用的它的菜单的效果,下面就来看看Ac

随机推荐