2016-01-13 77 views
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> 

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> 
+0

此頁面保存爲.php然後對包括此代碼中的PHP代碼喜歡 - –

+0

謝謝,但我在哪裏可以找到jQuery的ui.css爲ref和鏈接? – mani

+0

從jquery-ui下載@mani下載它,如果您對答案滿意,請通過接受答案來關閉該問題。 –

相關問題