html thinphp3的模板标签
http://document.thinkphp.cn/manual_3_2.html#foreach
<div class="cont">
<div class="item" id="switch-tab">
<span class="on" data-type="1">积分累计</span>
<span data-type="2">积分消耗</span>
</div>
<div class="block" id="switch-content">
<ul class="list on">
<foreach name="list1" item="r" >
<li>
<div class="left">
<p class="name">{$r['reason']}</p>
<p class="time">{$r['created_at']}</p>
</div>
<span class="num">+{$r['amount']}积分</span>
</li>
</foreach>
</ul>
<ul class="list">
<if condition="(empty($list2))">
<li>
<p class="text-center">暂无积分消耗</p>
</li>
<else />
<foreach name="list2" item="r" >
<li>
<div class="left">
<p class="name">{$r['reason']}</p>
<p class="time">{$r['created_at']}</p>
</div>
<span class="num">-{$r['amount']}积分</span>
</li>
</foreach>
</if>
</ul>
<!--
<li>
<div class="left">
<p class="name">注册赠送</p>
<p class="time">2019-10-03 11:38:04</p>
</div>
<span class="num">+1积分</span>
</li>
-->
</ul>
</div>
</div>
<!-- / .cont -->js
var tabs = document.getElementById("switch-tab").querySelectorAll("span");
var contents = document.getElementById("switch-content").querySelectorAll(".list");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick = (function(i, n) {
return function(e) {
for (var j = 0; j < n; j++) {
if (i != j) {
tabs[j].classList.contains("on") && tabs[j].classList.remove("on");
contents[j].classList.contains("on") && contents[j].classList.remove("on");
} else {
tabs[i].classList.add("on");
contents[i].classList.add("on");
}
}
}
})(i, tabs.length);
}主要的css:
.cont .block .list li {
padding: 8px 0 12px 0;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 12px;
border-bottom: 1px #f5f5f5 solid;
}
PHP面试问题:
