0

我正在使用以下代码为选项卡式窗格中的每个窗格写入数据。

<style>
#variantcontent
{
    margin-left:24px;
    margin-right:24px;
}

#varianttabs ul
{
    font: normal 14px arial, sans, sans-serif;
    -list-style-type: none;
    border-bottom: 1px solid gray;
    margin: 0;
    padding-left:0;
    padding-right:0;
    padding-bottom: 26px;
}

#varianttabs ul li 
{
    display: inline;
    float: left;
    height: 24px;
    min-width:80px;
    text-align:center;
    padding:0;
    margin: 1px 0px 0px 0px;
    border: 1px solid gray;
}

#varianttabs ul li.selected 
{
    border-bottom: 1px solid #fff;
    background-color: #fff;
}


#varianttabs ul li a 
{
    float: left;
    color: #666;
    text-decoration: none;
    padding: 4px;
    text-align:center;
    background-color:#eee;
    min-width:80px;
    border-bottom: 1px solid gray;
}

#varianttabs ul li a.selected
{
    color: #fff;
    background-color: #909090;
    border-bottom: 1px solid #fff;
}

#varianttabs ul li a:hover
{
    color: #fff;   
    background-color:#D0D0D0;
}

#variantcontainer 
{
    background: white;
    border:1px solid gray;
    border-top: none;
    height:600px;
    width:100%;
    padding:0;
    margin:0;
    left:0;
    top:0;  
}

iframe
{
    border:none;
    margin:0;
    padding:0;
}

</style>

<script>

function loadit( element)
{
    var container = document.getElementById('variantcontainer');
    container.src=element.rel;

    var tabs=document.getElementById('varianttabs').getElementsByTagName("a");
    for (var i=0; i < tabs.length; i++)
    {
        if(tabs[i].rel == element.rel) 
            tabs[i].className="selected";
        else
            tabs[i].className="";
    }
}

function startit()
{
    var tabs=document.getElementById('varianttabs').getElementsByTagName("a");
    var container = document.getElementById('variantcontainer');
    container.src = tabs[0].rel;
}

window.onload=startit;


</script>

<div id="variantcontent">
<div id="varianttabs">
<ul>
     <li><a href="#" rel="table.html" onClick="loadit(this)">A</a></li>
     <li><a href="#" rel="variant.html"  onclick="loadit(this)">B</a></li>
     <li><a href="#" rel="fr.html" onClick="loadit(this)">C</a></li>
</ul>
<iframe id="variantcontainer"></iframe>
</div>    
</div>

在此处输入图像描述

我在 php 页面中有表格、文本和图片，因此生成 html 文件并保存在服务器上并稍后在 onclick 事件期间导入它们将是双重工作。有没有办法只为每个选项卡编写表格、文本和图片，而不是通过单击事件来导入它们？

4

1 回答 1

1 
<html>
<head>
<link href="jquery-ui.css" rel="stylesheet">

<link rel="stylesheet" href="jquery-ui\jquery-ui-themes-1.11.4\jquery-ui-themes-1.11.4\themes/smoothness/jquery-ui.css" />
<script>
$( "#tabs" ).tabs();
</script>
</head>
<body>
<div id=""tabs>
<ul>
<li><a href="#tab-1">tab1</a></li>
<li><a href="#tab-2">tab1</a></li>
<li><a href="#tab-3">tab1</a></li>
</ul>
</div>
<div id="tab-1">
<table>
<tr>
<td>//table data goes here</td>
</tr>
</table>
</div>
<div id="tab-2">
<a href="//your img path goes here"></a>
</div>
</body>
</html>

希望这是您要实现的目标。您可以像这样在此代码中包含您的 php 代码-

<table>
        <thead>
            <tr>
                <td>Naam</td>
                <td>Gemeente</td>
                <td>Datum</td>
            </tr>
        </thead>
        <tbody>
       <?php
          $db_select = mysql_select_db($dbname,$db);
            if (!db_select) {
                die("Database selection also failed miserably: " . mysql_error());
            }
            mysql_select_db("databaseiheko");
            $results = mysql_query("SELECT NaamFuif, GemeenteFuif, DatumFuif FROM tblfuiven");
            while($row = mysql_fetch_array($results)) {
            ?>
                <tr>
                    <td><?php echo $row['NaamFuif']?></td>
                    <td><?php echo $row['GemeenteFuif']?></td>
                    <td><?php echo &row['DatumFuif']?></td>
                </tr>

            <?php
            }
            ?>   
            </tbody>
            </table>
于 2016-01-13T09:37:16.223 回答