我正在使用以下代码为选项卡式窗格中的每个窗格编写数据。
<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事件期间导入它们将是双重工作。有没有办法只为每个选项卡写表格、文本和图片，而不是通过点击事件来导入它们？
<html>
<head>
<link href="jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="jquery-uijquery-ui-themes-1.11.4jquery-ui-themes-1.11.4themes/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>