php - 在 processwire 中使用 php 引导选项卡

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：

$(文档).ready(函数(){

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

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