Как написать контент в панели с вкладками?

Я использую следующий код для записи данных для каждой панели в панели с вкладками.Как написать контент в панели с вкладками?

<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 событие. Есть ли способ просто написать таблицу, текст и изображения для каждой вкладки, а не импортировать их, нажав событие?

источник

2016-01-13 mani

<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 код внутри этого кода, а также как this-

<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-13 09:37:16

сохранить эту страницу, как .php и включать код PHP в пределах этого кода как- –

Спасибо, но где я могу найти Jquery-ui.css для ссылок и ссылок? – mani

скачайте его с jquery-ui download @mani, и если вас устраивает ответ, тогда закройте вопрос, приняв ответ –

Как написать контент в панели с вкладками?

ответ

Смежные вопросы