在processwire中使用PHP的bootsrap选项卡

Question

Hi i am new in php and i am stuck to this... im using boostrap framework with processwire

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

this code shows only the tabs title not the body, can anyone help me? thanks

Answer 1

I have created a JSfiddle for you. http://jsfiddle.net/jirilmongeorge/Ue8nG/

This demonstrates the solution (html + js + css) for your problem.

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

Answer 2

for bootsrap 3.0 you need to do..

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

or try this jsfiddle

to add active class to first result..

simply declare counter

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