导航栏栏目高亮原理以及延伸！（老大：张国辉）

导航栏高亮：

  <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=" 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=" 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=" 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>