PHP:如何动态输入数组选项卡中的值?

Question

我有一个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();
?>

那么问题出在哪里：

问题是我如何根据数组中的选项卡名称在选项卡中动态回显这些值，这意味着我已经给出了选项卡名称中第二个数组的值是两个，因此如果我将其更改为一个或三个，它应该在第二个选项卡中打印它应该分别打印一个或三个。

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>

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

Answer 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/fydwix 和 http://prntscr.com/fydwnx 和 http://prntscr.com/fydwsg