导航栏栏目高亮原理以及延伸！（老大：张国辉）
Posted lvqiupingboke-2019
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航栏栏目高亮原理以及延伸！（老大：张国辉）相关的知识，希望对你有一定的参考价值。
导航栏高亮：
<div class="nav">
<ul>
<li class="active" id="a1" onclick="setContentTabs(‘a‘,1,5)">东莞</li>
<li id="a2" onclick="setContentTabs(‘a‘,2,5)">浙江</li>
<li id="a3" onclick="setContentTabs(‘a‘,3,5)">西安</li>
<li id="a4" onclick="setContentTabs(‘a‘,4,5)">佛山</li>
<li id="a5" onclick="setContentTabs(‘a‘,5,5)">长沙</li>
</ul>
</div>
<script>
function setContentTabs(name, curr, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
menu.className = i == curr ? "active" : "";
}
}
</script>
<style>
.actives{color: palevioletred;}
</style>
延伸：
1，情况1：不循环的导航栏。点击固定栏目显示对应的内容
<div class="index_pro2">
<div class="title">
<div class="inbox wrap2 clearfix" style="#ffffff;">
<ul>
<li class="{$up}" id="two1" onclick="setContentTab(‘two‘,1,6)">{$class_index[211][name]}</li>
<li class="{$up}" id="two2" onclick="setContentTab(‘two‘,2,6)">{$class_index[272][name]}</li>
<li class="{$up}" id="two3" onclick="setContentTab(‘two‘,3,6)">{$class_index[221][name]}</li>
<li class="{$up}" id="two4" onclick="setContentTab(‘two‘,4,6)">{$class_index[226][name]}</li>
<li class="{$up}" id="two5" onclick="setContentTab(‘two‘,5,6)">{$class_index[231][name]}</li>
<li class="{$up}" id="two6" onclick="setContentTab(‘two‘,6,6)">{$class_index[274][name]}</li>
</ul>
</div>
</div>
<div class="main">
<div class="inbox wrap2 clearfix">
<ul>
<li class="block" id="con_two_1">
<div class="products clearfix">
<dl>
<!--
EOT;
$product_list = methtml_getarray(‘211‘,‘‘,‘‘,‘‘,‘4‘);
foreach($product_list as $key=>$val){
ECHO <<<EOT
-->
<dd>
<a href="{$val[url]}">
<div class="product_box"><img src="{$val[imgurl]}" style="width: 100%; height: 100%;"></div>
<div class="text"> {$val[title]}</div>
<div class="product_more"> <a href="{$val[url]}" style="padding-left: 4px">查看更多</a></div>
</a>
</dd>
<!--
EOT;
}
ECHO <<<EOT
-->
</dl>
</div>
</li>
<li id="con_two_2">
<div class="products clearfix">
<dl>
<!--
EOT;
$product_list = methtml_getarray(‘272‘,‘‘,‘‘,‘‘,‘4‘);
foreach($product_list as $key=>$val){
ECHO <<<EOT
-->
<dd>
<a href="{$val[url]}">
<div class="product_box"><img src="{$val[imgurl]}" style="width: 100%; height: 100%;"></div>
<div class="text"> {$val[title]}</div>
<div class="product_more"> <a href="{$val[url]}" style="padding-left: 4px">查看更多</a></div>
</a>
</dd>
<!--
EOT;
}
ECHO <<<EOT
-->
</dl>
</div>
</li>
<ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function setContentTab(name, curr, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var cont = document.getElementById("con_" + name + "_" + i);
menu.className = i == curr ? "up" : "";
if (i == curr) {
cont.style.display = "block";
} else {
cont.style.display = "none";
}
}
}
</script>
2，情况2：循环的导航栏，点击显示对应的内容。：
<div class="index_pro" style="width: 1200px; margin: 0 auto;">
<div class="title">
<div class="inbox wrap2 clearfix">
<ul>
<!--
EOT;
$i=0;
foreach($nav_list2[$class_index[2][id]] as $key=>$val){
$i++;
if($i == 1){
$up = ‘up‘;
}else{
$up = ‘‘;
}
echo <<<EOT
-->
<li class="{$up}" id="one{$i}" onclick="setContentTab(‘one‘,{$i},7)">{$val[name]}</li>
<!--
EOT;
}
echo <<<EOT
-->
</ul>
</div>
</div>
<div class="main">
<div class="inbox wrap2 clearfix">
<ul>
<li class="block" id="con_one_1">
<div class="products clearfix">
<dl>
<!--
EOT;
$product_list = methtml_getarray(‘21‘,‘‘,‘‘,‘‘,‘2‘);
foreach($product_list as $key=>$val){
ECHO <<<EOT
-->
<dd><a href="{$val[url]}"><img src="{$val[imgurl]}" ></a></dd>
<!--
EOT;
}
ECHO <<<EOT
-->
</dl>
</div>
<div class="text product_text">
<dd>
<div class="t1">产品特性</div>
<div class="t2">
<p>环保优势：发泡剂无毒，原料环保；整个成型过程无有毒物质排放，过程环保； 成品可降解，理论上100%可回收，制成品环保；</p>
<p>性能优势：回弹率高；耐磨，耐折，耐黄变；压缩永久形变低；材料性能对温度变化不敏感；</p>
<p>效率优势：连续，高效的物理发泡方式；高效，优质的产品成型方式；</p>
</div>
</dd>
<dd>
<div class="t1">应用领域</div>
<div class="t2">休闲鞋材，环保地坪跑道，智能家居，装饰填充，体育器材等</div>
</dd>
<!-- <a href="{$class_index[21][url]}">点此进入</a> -->
</div>
<!-- <div class="img" style="background-image:url({$class_index[21][indeximg]})"><img src="{$img_url}bg05.png" /></div> -->
</li>
<li id="con_one_2">
<div class="products clearfix">
<dl>
<!--
EOT;
$product_list = methtml_getarray(‘27‘,‘‘,‘‘,‘‘,‘2‘);
foreach($product_list as $key=>$val){
ECHO <<<EOT
-->
<dd><a href="{$val[url]}"><img src="{$val[imgurl]}" ></a></dd>
<!--
EOT;
}
ECHO <<<EOT
-->
</dl>
</div>
<div class="text product_text">
<dd>
<div class="t1">产品特性</div>
<div class="t2">
<p>良好的重复使用性：产品可以反复使用。</p>
<p>高级化学和耐候性：优异的耐酸碱性。</p>
<p>杰出的热稳定性：在高温下，能够保证产品的稳定。</p>
<p>尺寸的高精度：可以满足高精度的产品。</p>
<p>良好的隔热性：可用于隔热绝缘产品。</p>
<p>易于回收和处置热：环保型材料，报废品可以回收再加工。</p>
<p>优越的缓冲性能：对高强度的冲击有良好的缓冲能力。</p>
</div>
</dd>
<dd>
<div class="t1">应用领域</div>
<div class="t2">冷链包装，汽车配件，地暖模板（基材）</div>
</dd>
<!-- <a href="{$class_index[27][url]}">点此进入</a> -->
</div>
<!-- <div class="img" style="background-image:url({$class_index[27][indeximg]})"><img src="{$img_url}bg05.png" /></div> -->
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function setContentTab(name, curr, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var cont = document.getElementById("con_" + name + "_" + i);
menu.className = i == curr ? "up" : "";
if (i == curr) {
cont.style.display = "block";
} else {
cont.style.display = "none";
}
}
}
</script>
以上是关于导航栏栏目高亮原理以及延伸！（老大：张国辉）的主要内容，如果未能解决你的问题，请参考以下文章