我正在使用以下代码为选项卡式窗格中的每个窗格写入数据。
<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>
enter image description here
我在php页面中有表格，文本和图片，因此生成html文件并保存在服务器上，稍后在onclick事件中导入它们将是双重工作。有什么方法可以只为每个标签写表格，文本和图片，而不是通过单击事件来导入它们？
最佳答案
<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>
关于javascript - 如何在选项卡式面板中编写内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34762627/