Question

你好我是php的新手，我坚持这个...我正在使用带有processwire的boostrap框架

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

此代码仅显示标题标题而非正文，任何人都可以帮助我吗？感谢

Answer 1

我为你创建了一个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：

（文档）$。就绪（函数（）{

$('#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;
}

Answer 2

for bootstrap 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>

在processwire中使用php的bootstrap选项卡

2 个答案: