PHP：如何从数组中动态输入选项卡中的值？

I have a PHP array, in which I have some related info's to echo like this.

我有一个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"

        )

    )

?>

I have made a function to echo out the name, desc and that is working perfectly

我已经做了一个函数来回应名称，desc，这是完美的

Here it is:

这里是：

<?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();

?>

So what's the problem:

所以有什么问题：

The problem is how can I dynamically echo out these value inside the tab according to the tab-name in the array means I have given the value of the second array in tab-name is two so it should print in the second tab if I change it to one or three it should print the values to one or three respectively.

问题是如何根据数组中的tab-name动态回显选项卡中的这些值意味着我已经在tab-name中给出了第二个数组的值为2，所以如果我改变它应该在第二个选项卡中打印它应该分别将值打印到一个或三个。

I hope you guys understand.

我希望你们明白。

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>

NOTE: I don't want to use js for implementing these info's so please guy avoid js answers if it is possible with PHP.

注意：我不想使用js来实现这些信息，所以如果可以使用PHP，请尽量避免使用js答案。

1 个解决方案

#1

Your php page need to be like this:-

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

Output:- http://prntscr.com/fydwix And http://prntscr.com/fydwnx And http://prntscr.com/fydwsg

输出： - http://prntscr.com/fydwix和http://prntscr.com/fydwnx和http://prntscr.com/fydwsg