2 Replies Latest reply on May 19, 2014 4:38 AM by BKBK

    tabs - ui

    Abdul L Koyappayil Level 1

      <!doctype html>

      <html>

      <head>

      <link rel="stylesheet" type="text/css" href="style.css"></link>

      <script type="text/javascript" src="jquery.js"></script>

      </script>

      </head>

      <body style="background-color:#00BFFF">

       

      <div class="tabs">

        <ul class="tablink">

        <cfif session.x eq 1 or session.x eq 6><li <cfif session.current_page eq "ci">class="active" </cfif>> <a href="check_initiation.cfm?page=ci">Check Initiation</a> <li></cfif>

       

        <cfif session.x eq 2 or session.x eq 6><li <cfif session.current_page eq "ofac">class="active" </cfif>> <a href="ofac_approval.cfm?page=ofac">OFAC Approval</a> <li></cfif>

        <cfif session.x eq 3 or session.x eq 6><li <cfif session.current_page eq "fla">class="active" </cfif>> <a href="first_level_approval.cfm?page=fla">First Level Approval</a> <li></cfif>

        <cfif session.x eq 4 or session.x eq 6><li <cfif session.current_page eq "pnt">class="active" </cfif>> <a href="print.cfm?page=pnt">Print</a> <li></cfif>

        <cfif session.x eq 5 or session.x eq 6><li <cfif session.current_page eq "fin">class="active" </cfif>> <a href="finance.cfm?page=fin">Finance</a> <li></cfif>

        </ul>

        <div class="tab-content">

       

      <cfinclude template="display_tabs.cfm">

      <div id="home" class="tab active">

        <table border="1">

        <tr>

        <td align="right"><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        <tr>

        <td><label>GL Number</label>    </td>

        <td><input type="text"></td>

        </tr>

        </table>

        </div>

       

        <div id="about" class="tab">

        <p>I'm Mark Stevens </p>

        </div>

       

        <div id="contact" class="tab">

        <p> Contact me @ markstevenshpvn at gmail</p>

        </div>

        </div>

      </div>

      </body>

      </html>

       

       

       

       

      .tabs{width:100%; display:inline-block; }

       

       

      .tablink:after{ display:block; clear:both; content:''}

       

       

      .tablink li { margin:0px 5px;float:left;list-style:none;}

       

       

      .tablink a

      {padding:9px 15px;

      display:inline-block;

      border-radius:3px 3px 0px 0px;

      background:#7FB5DA;

      font-size:16px;

      font-weight:600;

      color:#4c4c4c;

      transition:all linear 0.15s;

      text-decoration:none}

       

       

      .tablink a:hover{background:#a7cce5; text-decoration:none;}

       

       

      li.active a, li.active a:hover {background:#fff; color:#4c4c4c}

       

       

      .tab-content

      {

      margin:-16px 10px;

      padding:15px;

      border-radius:3px;

      box-shadow: -1px 1px 1px rgba(0,0,0,0.15);

      background:#fff;}

       

       

      .tab{display:none;}

       

       

      .tab.active{display:block;margin-left:20%}