js 实现导航层的显隐

<div class="navigation">
                            <ul id="nav">
                                <li><span>
                                    <img id="img_0" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>信息管理
                                    <ul id="u_0">
                                        <li>本站新闻</li>
                                        <li>行业新闻</li>
                                        <li>求购信息</li>
                                        <li>发布信息</li>
                                    </ul>
                                </li>
                                <li><span>
                                    <img id="img_1" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>公司新闻
                                    <ul id="u_1">
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                    </ul>
                                </li>
                                <li><span>
                                    <img id="img_2" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>公司新闻
                                    <ul id="u_2">
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                    </ul>
                                </li>
                                <li><span>
                                    <img id="img_3" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>公司新闻
                                    <ul id="u_3">
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                    </ul>
                                </li>
                                <li><span>
                                    <img id="img_4" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>公司新闻
                                    <ul id="u_4">
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                    </ul>
                                </li>
                                <li><span>
                                    <img id="img_5" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>公司新闻
                                    <ul id="u_5">
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                    </ul>
                                </li>
                                <li><span>
                                    <img id="img_6" onclick="nav_expand(this.id)" src="images/dian2.jpg" /></span>公司新闻
                                    <ul id="u_6">
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                        <li>公司新闻</li>
                                    </ul>
                                </li>
                                <li id="bottom_li"></li>
                            </ul>
                        </div>
var nav_li_ul_items = $get("nav").getElementsByTagName("ul");
function nav_expand(id) {

    var ul_id = "u" + id.substring(id.indexOf("_"));

    for (var i = 0; i < nav_li_ul_items.length; i++) {
        if (nav_li_ul_items[i].id == ul_id) {
            nav_li_ul_items[i].style.display = "block";
            $get("img_" + i).src = "images/dian1.jpg";
        } else {
            nav_li_ul_items[i].style.display = "none";
            $get("img_" + i).src = "images/dian2.jpg";
        }

    }
}
posted @ 2011-06-09 14:24  solomon_Blog  阅读(375)  评论(0编辑  收藏  举报