导航栏高亮:

  <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]}" alt="" style="width: 100%; height: 100%;"></div>
        <div class="text">&nbsp;&nbsp;{$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]}" alt="" style="width: 100%; height: 100%;"></div>
        <div class="text">&nbsp;&nbsp;{$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]}" alt=""></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]}" alt="" ></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>