• 查看
    • 编辑修改
    • 首页
    • UNITY
    • NODEJS
    • PYTHON
    • AI
    • GIT
    • PHP
    • GO
    • CEF3
    • JAVA
    • HTML
    • CSS
    devbox
    小小林熬夜学编程
    这个屌丝很懒,什么也没留下!
    关注作者
    热门标签
    • jquery
    • HTML
    • CSS
    • PHP
    • ASP
    • PYTHON
    • GO
    • AI
    • C
    • C++
    • C#
    • PHOTOSHOP
    • UNITY
    • iOS
    • android
    • vue
    • xml
    • 爬虫
    • SEO
    • LINUX
    • WINDOWS
    • JAVA
    • MFC
    • CEF3
    • CAD
    • NODEJS
    • GIT
    • Pyppeteer
    • article
    热门文章
    • 1Whale 帷幄创始人叶生晅:AIGC 时代,营销的范式变了丨未来 AI 谈
    • 2【OpenCV+OCR】计算机视觉:识别图像验证码中指定颜色文字
    • 3java调用chatgpt接口,实现专属于自己的人工智能助手
    • 4postman自动化测试如何设置环境变量教程
    • 5华为OD机试题【篮球比赛】用 C++ 进行编码 (2023.Q1)_华为机考篮球比赛吃+
    • 6字节跳动程序媛教你如何刷算法题:面试手撕代码我就没怕过_手撕代码不会怎么办
    • 7探索 C# 中的程序运行目录获取方法
    • 8商用车第一张,比亚迪引领汽车智能网联安全合规新趋势_比亚迪数据安全管理体系
    • 9postman官网下载安装登录测试详细教程
    • 10Stable-Diffusion|从图片反推prompt的工具:Tagger(五)_在线tagger反推
    当前位置:   article > 正文

    fastadmin 中使用bootstrap tabs 加载切换会隐藏input标签_fastadmin tab切换 nav nav-tabs

    作者:小小林熬夜学编程 | 2024-02-08 14:12:03

    赞

    踩

    fastadmin tab切换 nav nav-tabs

    bootstrap 官方示例

    1. <ul class="nav nav-tabs" id="myTab" role="tablist">
    2. <li class="nav-item" role="presentation">
    3. <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    4. </li>
    5. <li class="nav-item" role="presentation">
    6. <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    7. </li>
    8. <li class="nav-item" role="presentation">
    9. <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    10. </li>
    11. </ul>
    12. <div class="tab-content" id="myTabContent">
    13. <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    14. <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    15. <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
    16. </div>

     效果:加载时内容空白

    点击tabs切换 表单正常

    原因   class中定义了fade,把fade删除

      最终效果

     代码示例

    1. <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    2. <ul class="nav nav-tabs" id="myTab" role="tablist">
    3. <li class="nav-item active" role="presentation">
    4. <a class="nav-link active" id="notice-tab" data-toggle="tab" href="#notice" role="tab" aria-controls="notice" aria-selected="true">平台公告</a>
    5. </li>
    6. <li class="nav-item" role="presentation">
    7. <a class="nav-link" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">系统消息</a>
    8. </li>
    9. </ul>
    10. <div style="margin-top: 20px"></div>
    11. <div class="form-group">
    12. <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
    13. <div class="col-xs-12 col-sm-8">
    14. <input id="c-title" class="form-control" name="row[title]" type="text">
    15. </div>
    16. </div>
    17. <div class="tab-content" id="myTabContent">
    18. <div class="tab-pane fade active" id="notice" role="tabpanel" aria-labelledby="notice-tab">
    19. <input type="hidden" name="row[type]" value="0">
    20. <div class="form-group">
    21. <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
    22. <div class="col-xs-12 col-sm-8">
    23. <textarea id="c-content" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
    24. </div>
    25. </div>
    26. </div>
    27. <div class="tab-pane fade" id="info" role="tabpanel" aria-labelledby="info-tab">
    28. <input type="hidden" name="row[type]" value="1">
    29. <div class="form-group">
    30. <label class="control-label col-xs-12 col-sm-2">{:__('Link_url')}:</label>
    31. <div class="col-xs-12 col-sm-8">
    32. <input id="c-link_url" class="form-control" name="row[link_url]" type="text">
    33. </div>
    34. </div>
    35. </div>
    36. </div>
    37. <div class="form-group">
    38. <label class="control-label col-xs-12 col-sm-2">{:__('Time')}:</label>
    39. <div class="col-xs-12 col-sm-8">
    40. <input id="c-time" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[time]" type="text" value="{:date('Y-m-d H:i:s')}">
    41. </div>
    42. </div>
    43. <div class="form-group">
    44. <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
    45. <div class="col-xs-12 col-sm-8">
    46. <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="0">
    47. </div>
    48. </div>
    49. <div class="form-group">
    50. <label class="control-label col-xs-12 col-sm-2">{:__('State')}:</label>
    51. <div class="col-xs-12 col-sm-8">
    52. <div class="radio">
    53. {foreach name="stateList" item="vo"}
    54. <label for="row[state]-{$key}"><input id="row[state]-{$key}" name="row[state]" type="radio" value="{$key}" {in name="key" value="1"}checked{/in} /> {$vo}</label>
    55. {/foreach}
    56. </div>
    57. </div>
    58. </div>
    59. <div class="form-group layer-footer">
    60. <label class="control-label col-xs-12 col-sm-2"></label>
    61. <div class="col-xs-12 col-sm-8">
    62. <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
    63. <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
    64. </div>
    65. </div>
    66. </form>

     

    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/69374
    推荐阅读
    • article卸载 vmware-tools.pl和安装 vmware-tools.pl失败了,谁能解?_ente...
      v2x@ubuntu:~/Desktop/vmware-tools-distrib$ lsbin caf doc etc...

      赞

      踩

    • articlePOJ 2115 C Looooops_the input consists of several ...
      POJ 2115 C Looooops题目链接DescriptionA Compiler Mystery: We are...

      赞

      踩

    • articlePython 第九课:函数(中)_def fun(): s = input() for i in s...
      1. 函数的返回值(接上函数(上))使用实例进行说明:def fun(*args): r = 0 for i in ag...

      赞

      踩

    • articleCodeforces Round #706 (Div. 2)A--C_the input consi...
      传送门A. Split it!outputstandard outputKawashiro Nitori is a gi...

      赞

      踩

    • article常用ADB指令总结_adb shell input keyevent 224...
      文章目录1.连接设备2.查看设备3.操作多个设备4.关机与重启5.刷机模式6.查看应用7.查看应用的activity信息...

      赞

      踩

    • articleappium+python adb shell模拟点击事件(input tap)_adb shel...
      前言此篇文章大部分内容为转载,部分内容本人细化,加工!appium有时候定位一个元素很难定位到,或者说明明定位到这个元素...

      赞

      踩

    • articleadb shell input 及event_adb shell input keyevent 26...
      adb shell input以及event可以模拟用户点击。可以用来写自动化测试脚本。关于adb shell inpu...

      赞

      踩

    • article模拟键盘输入adb shell input_adb shell input text...
      >adb shell inputUsage: input [] [...]...

      赞

      踩

    • articleadb shell命令模拟按键/输入input使用keycode 列表详解_adb shell in...
      在adb shell里有一个非常使用的命令,模拟按键输入,这里首先不要理解为是键盘的模拟按键,下面命令的使用和键值做一个...

      赞

      踩

    • articleadb shell cmd input_安卓7.0 adb shell input dragandd...
      adb shell cmd input_安卓7.0 adb shell input draganddrop 出错安卓7....

      赞

      踩

    • articleAndroid 命令常记_adb shell input keyevent --longpress...
      1. input keyevent --longpress <键值>长按键值操作。_adb shell input ke...

      赞

      踩

    • articleAndroid13 adb input 调试命令使用和源码解析...
      本章重点Android13 adb input 调试命令的使用和源码分析 通过命令来模拟用户在设备上的各种操作,从而进行...

      赞

      踩

    • articlejs 正则 限制 input 只能输入数字,不能输入特殊符号,保留两位小数等效果_js input...
      限制只能输入数字,小数点只保留2位,限制不能输入空格
      <input type="text" ...

      赞

      踩

    • articlevue el-input 禁止输入特殊字符 只可输入数字 正则验证_vue校验只允许输入数字正则...
      在el-input 内 使用 keyup等事件 需要添加 .native 否则无法正常执行事件。限制输入正数 保留两位小...

      赞

      踩

    • articlePyTorch的ONNX结合MNIST手写数字数据集的应用(.pth和.onnx的转换与onnx运行...
      本文介绍了PyTorch模型.pth和.onnx格式的转换,以及在MNIST数据集上的应用。同时提供了.pth文件结构和...

      赞

      踩

    • articlePHP与JSON的一些常用操作_"$str = file_get_contents(\"php://...
      PHP把数据写入JSON文件php// 生成一个PHP数组$data = array ();$data ["frui...

      赞

      踩

    • articleiOS input[type=checkbox]打勾后不显示选中状态的问题_has(input[ty...
      webkit内核浏览器的问题:1、检查-webkit-appearance样式属性是否被设置为了none或者auto。2...

      赞

      踩

    • articlelinux命令和vim学习_following standard input indefinitel...
      文件相关命令man less:查看less的帮助手册 --helpsudo cat /etc/passwd:sudo用于...

      赞

      踩

    • articlebootstrap nav nav-tabs add tab javascript...
      $('#btnAdd').click(function (e) { var nextTab = $('#tabs li...

      赞

      踩

    • articlejs高级—tab栏切换(面向对象做法)_nav tabs js切换...

      Js 面向对象 动态添加标签页

      [详细] -->

      赞

      踩

    相关标签
    • python
    • 服务器
    • linux
    • 网络
    • 自动化测试
    • adb
    • 脚本
    • adb模拟键盘输入
    • android
    • adb shell
    • android adb
    • 511遇见
    • cmd
    • input
    • 调试
    • vue.js
    • elementui
    • 前端

    Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。

      

    闽ICP备14008679号