如何在选项卡式面板中写入内容？
Posted
技术标签:
【中文标题】如何在选项卡式面板中写入内容？【英文标题】：How to write content in tabbed panel? 【发布时间】：2016-01-13 09:17:13 【问题描述】：我正在使用以下代码为选项卡式窗格中的每个窗格写入数据。
<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 事件期间导入它们将是双重工作。有没有办法只为每个选项卡编写表格、文本和图片，而不是通过点击事件来导入它们？
【问题讨论】：
【参考方案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>
【讨论】：
将此页面另存为 .php 并在此代码中包含 php 代码，例如- 谢谢，但是我在哪里可以找到 jquery-ui.css 的参考和链接？ 从 jquery-ui 下载 @mani 下载它，如果您对答案感到满意，然后通过接受答案来关闭问题 我还想要这种格式的 UI。i.stack.imgur.com/5nLad.png 但在您的示例中，它是不同的布局，所以我如何以相同的形式控制。 是的，你会得到那个界面或者比你预期的更好的界面......即使我是新学习者，我真的很惊讶使用 jquery 找到如此出色的用户界面以上是关于如何在选项卡式面板中写入内容？的主要内容，如果未能解决你的问题，请参考以下文章
在带有选项卡式控件的表单中，单击按钮会降低焦点选项卡页中的面板高度，如果移动到另一个选项卡并返回，则会更正
JAVA Swing - 另一个卡片面板上的卡片面板上的选项卡式面板 setSelectedIndex()