2017-07-21 13 views
4

私はPHP配列を持っています。この配列には、このようなエコー情報があります。PHP:配列からタブの値を動的に入力するにはどうしたらいいですか?

<?php 

    $options = array(

     array("name" => "Title", 
      "desc" => "Description", 
      "type" => '_one', 
      "tab-name" => "Tab 1" 

     ), 

     array("name" => "Title2", 
      "desc" => "Description2", 
      "type" => '_two', 
      "tab-name" => "Tab 2" 

     ), 

     array("name" => "Title3", 
      "desc" => "Description3", 
      "type" => '_three', 
      "tab-name" => "Tab 3" 

     ) 

    ) 

?> 

私はDESC、名前をエコーする機能を作ってきたし、それは完全に

働いているここでは、次のとおりです。

<?php 

function create_heading($value) { 
    echo '<h2>'.$value['name'].'</h2>'; 
} 
function create_description($value){ 
    echo '<p>'.$value['desc'].'</p>' 
} 

function wrapper1($value) { 
    echo '<h1>This is the wrapper 1</h1>' 
    create_heading($value); 
    create_description($value); 
} 

function wrapper2($value) { 
    echo '<h1>This is the wrapper 2</h1>' 
    create_heading($value); 
    create_description($value); 
} 

function wrapper2($value) { 
    echo '<h1>This is the wrapper 3</h1>' 
    create_heading($value); 
    create_description($value); 
} 


function render_things($options) { 
    foreach ($options as $value) { 
     switch($value['type']) { 
      case "one": 
       wrapper1($value); 
       break; 
      case "two": 
       wrapper2($value); 
      case "three": 
       wrapper3($value); 
     } 
    } 
} 


render_things(); 

?> 

だから何が問題だ:

問題は、どのようにタブ内にこれらの値を動的にエコーすることができるかです。私は配列の意味私は2番目のタブの値を1または3にそれぞれ1または3を印刷する必要がありますそれを変更する場合、2番目のタブで印刷する必要がありますので、2番目の配列の値をtab-nameに与えていることを意味します。

皆さんにご理解いただきたいと思います。

body {font-family: "Lato", sans-serif;} 
 

 
/* Style the tab */ 
 
div.tab { 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
}
<div class="tab"> 
 
    <button class="tablinks" onclick="openCity(event, 'tab1')" id="defaultOpen">tab 1</button> 
 
    <button class="tablinks" onclick="openCity(event, 'tab2')">tab 2</button> 
 
    <button class="tablinks" onclick="openCity(event, 'tab3')">Tab 3</button> 
 
</div> 
 

 
<div id="tab1" class="tabcontent"> 
 
    <h1>This is tab 1</h1> 
 
</div> 
 

 
<div id="tab2" class="tabcontent"> 
 
    <h1>This is tab 2</h1> 
 
</div> 
 

 
<div id="tab3" class="tabcontent"> 
 
    <h1>This is tab 3</h1> 
 
</div> 
 

 
<script> 
 
function openCity(evt, cityName) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
} 
 

 
// Get the element with id="defaultOpen" and click on it 
 
document.getElementById("defaultOpen").click(); 
 
</script>

注:私はそれがPHPで可能であればその男のjsの回答を避けてくださいだこれらの情報を実装するためのJSを使用する必要はありません。

答えて

1

PHPのページは次のようにする必要があります: -

<style> 
body {font-family: "Lato", sans-serif;} 

/* Style the tab */ 
div.tab { 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
} 

/* Style the buttons inside the tab */ 
div.tab button { 
    background-color: inherit; 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    transition: 0.3s; 
    font-size: 17px; 
} 

/* Change background color of buttons on hover */ 
div.tab button:hover { 
    background-color: #ddd; 
} 

/* Create an active/current tablink class */ 
div.tab button.active { 
    background-color: #ccc; 
} 

.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
} 
</style> 
<?php 
    // i assume that your page have this array available 
$options = array(

     array("name" => "Title", 
      "desc" => "Description", 
      "type" => '_one', 
      "tab-name" => "Tab 1" 

     ), 

     array("name" => "Title2", 
      "desc" => "Description2", 
      "type" => '_two', 
      "tab-name" => "Tab 2" 

     ), 

     array("name" => "Title3", 
      "desc" => "Description3", 
      "type" => '_three', 
      "tab-name" => "Tab 3" 

     ) 

    ); 

?> 
<div class="tab"> 
<?php foreach($options as $option){?> 
    <button class="tablinks" onclick='openCity(event, "<?php echo str_replace(" ","",$option["tab-name"]);?>")' id="defaultOpen"><?php echo $option['tab-name'];?></button> 
<?php } ?> 
</div> 


<?php foreach ($options as $opti){?> 
    <div id="<?php echo str_replace(' ','',$opti['tab-name']);?>" class="tabcontent"> 
     <?php foreach($opti as $key=>$val){?> 
     <h1><?php echo $key;?> : <?php echo $val;?></h1> 
     <?php } ?> 
    </div> 
<?php } ?> 
<script> 
function openCity(evt, cityName) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 
    document.getElementById(cityName).style.display = "block"; 
    evt.currentTarget.className += " active"; 
} 

// Get the element with id="defaultOpen" and click on it 
document.getElementById("defaultOpen").click(); 
</script> 

出力: - http://prntscr.com/fydwixhttp://prntscr.com/fydwnxそしてhttp://prntscr.com/fydwsg

+0

ページの名前を変更することがいいえ全然 –

+0

を必要としません。私はちょうど私が 'page.php'という名前を与えたと言っています。あなたの名前を使用する必要があります –

+0

いくつかの問題を確認し、修正してください。 –

関連する問題