tab切换

css

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      width: 100%;
      height: 100%;
      padding-top: 16px;
    }
    .approval-process-title {
      text-align: center;
      margin-bottom: 16px;
      font-size: 24px;
      font-weight: bold;
    }
    .approval-tab {
      display: flex;
      border-bottom: 1px solid #dbdbdb;
      padding: 0 16px;
    }
    .approval-tab-item {
      background-color: #f2f2f2;
      padding: 6px 16px;
      border: 1px solid #dbdbdb;
      border-bottom: 0;
      margin-right: 10px;
      border-radius: 4px 4px 0 0;
      font-size: 13px;
      cursor: pointer;
    }
    .tab-current {
      color: #5b83ca;
    }
    .approval-tab-content {
      padding: 16px;
    }
  </style>

html

<body>
<div class="approval-process-warp">
  <div class="approval-process-title">流程审批</div>
  <!-- tab -->
  <div class="approval-tab">
    <%--<div data-url="/vbase/vsitemap/base/mapbaseview1.jsp?id=40282aa18519f9b101852d6d6b820452&projectid=<%=projectid%>" class="approval-tab-item tab-current">--%>
      <%--流程发起--%>
    <%--</div>--%>
    <div
            data-url="/ServiceAction/com.velcro.workflow.report.servlet.ReportAction?action=search&reportid=40282aa184796a8a01847a6fd2e70037&projectid=<%=projectid%>"
            class="approval-tab-item tab-current">相关流程
  </div>
    <%--<%--%>
      <%--if (categoryids.equals("2c923daf70ccc2780170cd05dda5004a")){--%>
    <%--%>--%>
  <%--<div--%>
          <%--data-url="/ServiceAction/com.velcro.workflow.report.servlet.ReportAction?action=search&reportid=40282aa184569fd4018474baa05401ae&projectid=<%=projectid%>"--%>
          <%--class="approval-tab-item"--%>
  <%-->--%>
    <%--投后流程--%>
  <%--</div>--%>
    <%--<%--%>
      <%--}--%>
    <%--%>--%>
</div>
<!-- tab显示的内容 -->
<div class="approval-tab-content">
  <%--<iframe src="/vbase/vsitemap/base/mapbaseview1.jsp?id=40282aa18519f9b101852d6d6b820452&projectid=<%=projectid%>" width="100%" height="580px" frameborder="0"></iframe>--%>
  <iframe src="/ServiceAction/com.velcro.workflow.report.servlet.ReportAction?action=search&reportid=40282aa184796a8a01847a6fd2e70037&projectid=<%=projectid%>" width="100%" height="580px" frameborder="0"></iframe>
</div>

<!-- jquery cdn地址 后期换成本地的 -->
<%--<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>--%>
  <script src="/vjs/jquery/jquery.min.js" type="text/javascript"></script>
<script>
    // tab切换
    $(".approval-tab-item").on("click", function () {
        var url = $(this).attr("data-url")
        $(this).addClass("tab-current").siblings().removeClass("tab-current")
        $(".approval-tab-content iframe").attr("src", url)
    })

</script>
</div>
</body>

 

posted @ 2023-01-03 10:07  java璀璨小菜鸟  阅读(69)  评论(0)    收藏  举报