帮同事写一个原生jsp的tab导航栏表单校验提交

最新推荐文章于 2023-03-04 23:12:41 发布

Even_fzq

最新推荐文章于 2023-03-04 23:12:41 发布

阅读量481

点赞数

分类专栏：前端文章标签： tab 表单

本文链接：https://blog.csdn.net/qq_38630270/article/details/101752488

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

帮同事写一个原生jsp的tab导航栏表单校验提交demo

页面简单实现:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
  <!--<meta charset="UTF‐8">-->
  <title>tab页面</title>

  <style type="text/css">

    .form-actions{
      display: none;
    }

    .easytab_area {
      border: 1px solid #e9e9e9;
      padding: 8px;
    }

    ul.easytabs {
      margin: 16px 0;
      padding: 0 0 0 1px;
      width: 100%;
    }

    ul.easytabs li {
      list-style: none;
      display: inline;
    }

    ul.easytabs li a {
      background-color: #DCDCDC;
      color: white;
      padding: 8px;
      text-decoration: none;
      font-size: 14px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      border-bottom: none;
    }

    ul.easytabs li a:hover {
      background-color: #939495;
      /*border-color: #2f343a;*/
    }

    ul.easytabs li a.easytab_active {
      background-color: white;
      border: 1px solid #464c54;
      border-bottom: 2px solid #ffffff;
      color: black;
    }

    .easytab_content {
      background-color: #ffffff;
      padding: 10px;
      height: 400px;
    }

    .inputLeft {
      width: 20%;
      margin-right: 1%;
      border: 1px solid #e9e9e9;
      height: 25px;
      text-align: center;
    }

    .inputRight {
      width: 60%;
      border: 1px solid #e9e9e9;
      height: 25px;
      text-align: center;
    }

    .tableOut {
      border: 1px solid #e9e9e9;
      width: 100%;
      border-radius: 5px;
    }
  </style>
  <script>
    /**
     *
     * @param _this 所点击的tab标签
     * @param content_prefix tab标签所对应div的id前缀。注：这里要求所有的前缀必须一样。
     * @param active 所要激活div的id最后的数字。注：这里要求数字必须从零开始，依次增1.
     */
    function tabSwitch2(_this, content_prefix, active) {
      var tabs = document.getElementsByName(_this.name);
      var number = tabs.length;
      for (var i = 0; i < number; i++) {
        var tab = tabs[i];
        tab.className = "";
        document.getElementById(content_prefix + i).style.display = 'none';
      }
      _this.className = "easytab_active";
      document.getElementById(content_prefix + active).style.display = 'block';

      console.log('类型',typeof active);

      if (active===3){

        document.getElementById("submitDiv").style.display="block";
      }else{
        document.getElementById("submitDiv").style.display="none";
      }
    }

    function test() {

    }
  </script>
</head>
<body>

<form action="http://www.baidu.com" method="get">
  <div class="easytab_area">
    <!-- 头部tab -->
    <ul class="easytabs">
      <li><a name="easytab" class="easytab_active" onclick="tabSwitch2(this,'easytab_content_',0);">基本信息</a></li>
      <li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',1);">药学服务短信</a></li>
      <li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',2);">用法用量</a></li>
      <li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',3);">测试页面4</a></li>
    </ul>
    <!-- 表单内容 -->
    <div id="easytab_content_0" class="easytab_content">
      <table class="tableOut">
        <tr>
          <td><input class="inputLeft" type="text" value="测试页面1" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input  type="text" name="" value="hhhh"></td>
          <td><textarea></textarea></td>
        </tr>


      </table>
    </div>
    <div id="easytab_content_1" class="easytab_content">
      <table class="tableOut">
        <tr>
          <td><input class="inputLeft" type="text" value="测试页面2" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>


      </table>
    </div>
    <div id="easytab_content_2" class="easytab_content">
      <table class="tableOut">
        <tr>
          <td><input class="inputLeft" type="text" value="测试页面3" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>


      </table>
    </div>
    <div id="easytab_content_3" class="easytab_content">
      <table class="tableOut">
        <tr>
          <td><input class="inputLeft" type="text" value="测试页面3" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>
        <tr>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
          <td><input class="inputLeft" type="text" value="商品名称" readonly="readonly">
            <input class="inputRight" type="text" name="" value=""></td>
        </tr>


      </table>
    </div>
  </div>
  <div id="submitDiv" class="form-actions">
    <input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>
    <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    <li><input id="btnImport" class="btn btn-primary" type="button" value="导入"/></li>
  </div>
</form>
<script type="text/javascript">
  document.getElementsByName("easytab")[0].click();//页面加载完成后，点击第一个标签
</script>

</body>
</html>

Even_fzq

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
帮同事写一个原生jsp的tab导航栏表单校验提交

帮同事写一个原生jsp的tab导航栏表单校验提交<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <!--<meta charset="UTF‐8">--&gt...
复制链接

扫一扫

专栏目录