[英]bootsrap tabs with php in processwire
嗨,我是php的新手,我仍然坚持这一点。
<ul class="nav nav-tabs" id="myTab">
<?php foreach ($page->children as $item){
echo "<li> <a href='{$item->name}'> {$item->title} </a></li>";
}?>
</ul>
<div class="tab-content">
<?php foreach ($page->children as $item){
echo "<div class='tab-pane' id='{$item->name}'>{$item->body}</div>";
}?>
</div>
此代码仅显示标签标题,而不显示正文,有人可以帮助我吗? 谢谢
我为您创建了一个JSfiddle。 http://jsfiddle.net/jirilmongeorge/Ue8nG/
这演示了针对您的问题的解决方案(html + js + css)。
HTML:
<ul class="nav nav-tabs" id="myTab">
<li> <a href='itemname1' class='active'> item1title</a></li>
<li> <a href='itemname2'> item2title</a></li>
<li> <a href='itemname3'> item3title</a></li>
</ul>
<div class="tab-content">
<div class='tab-pane hidden' id='itemname1'> hello itemname1 <br/> body</div>
<div class='tab-pane hidden' id='itemname2'>heyy itemname2 <br/> body</div>
<div class='tab-pane hidden' id='itemname3'>now itemname3 <br/> body</div>
</div>
Javascript:
$(document).ready(function(){
$('#myTab li a').click(function(){
var tabContentDivId = $(this).attr('href');
//highlight cilcked 'a' tag
$('#myTab li a').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
//hide all content divs
$('div.tab-pane').each(function(){
$(this).addClass('hidden');
});
//display content for current tab
$('#' + tabContentDivId).removeClass('hidden');
return false;
});
//Select first li as default
$('#myTab li a:first').click();
});
CSS:
.hidden {
display:none;
}
.nav {
}
.nav-tabs {
list-style-type: circle;
}
.nav-tabs li a{
cursor:pointer;
text-decoration:none;
margin:20px;
}
. tab-content {
float:left
}
.tab-content .tab-pane {
border: 1px solid #0000ff;
margin:20px;
padding:10px;
}
a.active
{
color:green;
font-weight:bold;
}
对于bootsrap 3.0,您需要做..
<ul id="myTab" class="nav nav-tabs">
//your loop to retrieve tab names start
<li class="active"> //active is aplicable to only one tab you want to show selected
<a href="//tab path if required" data-toggle=" //tab name where
to switch"> //tab name</a>
</li>
// loop for tab name close here
</ul>
// body contents of all tabs start here
<div id="myTabContent" class="tab-content">
//your loop to retrieve tab body start
<div class="tab-pane fade in active" id="//tab name ">
//tab body
</div>
// loop to tab body close here
</div>
或尝试这个jsfiddle
将活动类添加到第一个结果中。
只需声明柜台
// your loop start here
<?php $i=1; ?>
<ul id="myTab" class="nav nav-tabs">
//your loop to retrieve tab names start
<li class="<?php if($i==1){echo 'active';} ?>">
<a href="//tab path if required" data-toggle=" //tab name where
to switch"> //tab name</a>
</li>
<?php $i++; ?>
// loop for tab name close here
//PHP CLOSE ?>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.