前端实例：页面布局2--Tab标签页切换（后端数据实现）

最新推荐文章于 2024-04-16 03:23:57 发布

25号底片~

最新推荐文章于 2024-04-16 03:23:57 发布

阅读量334

点赞数 2

分类专栏： php 前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_46001736/article/details/137043758

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

php

30 篇文章 0 订阅

订阅专栏

效果

index.php(数据库连接部分不写)

<!DOCTYPE html>
<html>

<head>
    <style>
        .tab_pos {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
        }

        /* 设置标签页外层容器样式 */
        .tab-container {
            width: 90%;
            background-color: #fff;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* 设置标签页选项卡的样式 */
        .tab {
            float: left;
            width: 150px;
            padding: 8px 16px;
            background-color: #ddd;
            cursor: pointer;
        }

        /* 设置选中的标签页样式 */
        .active {
            background-color: #409eff;
            color: #fff;
        }

        /* 设置标签页内容的样式 */
        .tab-content {
            clear: both;
            display: none;
            padding: 16px;
            background-color: #fff;
        }

        /* 切换页表格 */
        .tab_tab {
            border-collapse: collapse;
            border: 1px solid #ddd;
        }

        .tab_tab th {
            background-color: #ddd;
            height: 35px;
            line-height: 35px;
            border: none;
        }

        .tab_tab td {
            background-color: #fff;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #ddd;
        }

        /* 无数据 */
        .none_data {
            text-align: center;
            color: gray;
        }
    </style>
</head>

<body>
    <div class="tab_pos">
        <div class="tab-container">
            <!-- 标签页选项卡 -->
            <div class="tab active" onclick="openTab(event,'tab1')">供应商对应料号</div>
            <div class="tab" onclick="openTab(event,'tab2')">供应商对应采购单</div>
            <!-- 标签页内容 -->
            <div id="tab1" class="tab-content" style="display:block;">
                <table class="tab_tab">
                    <tr>
                        <th>供应商简称</th>
                        <th>料号</th>
                        <th>料号名称</th>
                        <th>规格型号</th>
                        <th>建立人</th>
                        <th>建立日期</th>
                    </tr>
                    <?php
                    //查询该供应商料号信息
                    $sql_selVI = "select a.*,c.item_name,c.item_desc
                                from vendors_itemno a,sf_item_no c
                                where a.vendor_code = '" . $_GET['UpdatevendorCode'] . "'
                                and a.item_no = c.item_no
                            ";
                    $res_selVI = DB_query($sql_selVI, $db);
                    // echo $res_selVI;
                    if (DB_num_rows($res_selVI) > 0) {
                        while ($myrow = DB_fetch_array($res_selVI)) {
                    ?>
                            <tr>
                                <td><?php echo $myrow['vendor_code'] ?></td>
                                <td><?php echo $myrow['item_no'] ?></td>
                                <td><?php echo $myrow['item_name'] ?></td>
                                <td><?php echo $myrow['item_desc'] ?></td>
                                <td><?php echo $myrow['created_by'] ?></td>
                                <td><?php echo date('Y-m-d H:i:s', $myrow['creation_date']) ?></td>
                            </tr>
                        <?php }
                    } else { ?>
                        <tr>
                            <td colspan="6" class="none_data">暂无数据</td>
                        </tr>
                    <?php } ?>
                </table>
            </div>
            <div id="tab2" class="tab-content">
                <table class="tab_tab">
                    <tr>
                        <th>采购单号</th>
                        <th>状态</th>
                        <th>备注</th>
                        <th>采购日期</th>
                        <th>需求日</th>
                        <th>下单日期</th>
                        <th>下单人</th>
                    </tr>
                    <?php
                    //查询该供应商料号信息
                    $sql_selPO = "SELECT DISTINCT 
                                        pha.po_num, 
                                        pha.status, 
                                        pha.note, 
                                        pha.creation_date,
                                        pha.order_date, 
                                        pha.need_date, 
                                        pha.created_by
                                FROM    po_headers_all pha, 
                                        po_lines_all pla, 
                                        vendors v
                                WHERE pla.po_num = pha.po_num
                                AND v.vendor_code = pha.vendor_code
                                AND v.vendor_code = '" . $_GET['UpdatevendorCode'] . "'
                                ";
                    $res_selPO = DB_query($sql_selPO, $db);
                    // echo $res_selVI;
                    if (DB_num_rows($res_selPO) > 0) {
                        while ($myrowPO = DB_fetch_array($res_selPO)) {
                    ?>
                            <tr>
                                <td><a href="<?php echo $RootPath ?>/SearchPO2.php?Updatepo_num=<?php echo $myrowPO['po_num'] ?>" target="_blank"><?php echo $myrowPO['po_num'] ?></a></td>
                                <td><?php echo $myrowPO['status'] ?></td>
                                <td><?php echo $myrowPO['note'] ?></td>
                                <td><?php echo date('Y-m-d', $myrowPO['order_date']) ?></td>
                                <td><?php echo date('Y-m-d', $myrowPO['need_date']) ?></td>
                                <td><?php echo date('Y-m-d H:i:s', $myrowPO['creation_date']) ?></td>
                                <td><?php echo $myrowPO['created_by'] ?></td>
                            </tr>
                        <?php }
                    } else { ?>
                        <tr>
                            <td colspan="7" class="none_data">暂无数据</td>
                        </tr>
                    <?php } ?>
                </table>
            </div>
        </div>
    </div>
    <script>
        function openTab(event, tabName) {
            // 获取所有标签页内容元素
            var tabContent = document.getElementsByClassName("tab-content");
            // 隐藏所有标签页内容
            for (var i = 0; i < tabContent.length; i++) {
                tabContent[i].style.display = "none";
            }
            // 移除所有标签页选项卡的 active 类
            var tabs = document.getElementsByClassName("tab");
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].className = tabs[i].className.replace(" active", "");
            }
            // 显示当前选中标签页内容
            document.getElementById(tabName).style.display = "block";
            // 添加 active 类到当前选中标签页选项卡
            event.currentTarget.className += " active";
        }
    </script>
</body>

</html>