用js显示和隐藏div

来源:互联网 发布:sap 工厂物料组主数据 编辑:程序博客网 时间:2024/05/18 16:19
<div id="content">
            <div id="content-menu">
                <div id="content-top"></div>
                <div id="cs">
                    <a id="content-menu1" href="#" onclick="select1()"></a>
                    <a id="content-menu2" href="#" onclick="select2()"></a>
                    <a id="content-menu3" href="#" onclick="select3()"></a>
                    <a id="content-menu4" href="#" onclick="select4()"></a>
                    <a id="content-menu5" href="#" onclick="select5()"></a>
                </div>
            </div>
            <div id="content-explain">
                <div id="content-explain1">
                 <h3 id="ff">介绍</h3>
                    <div id="content-explain1-describe">
 
                    </div>
                </div>
                <div id="content-explain2">
                 <h3 id="ff">条件</h3>
                    <div id="content-explain1-describe">
              
                    </div>
                </div>
                <div id="content-explain3">
                 <h3 id="ff">时间</h3>
                    <div id="content-explain1-describe">
           
                    </div>
                </div>
                <div id="content-explain4">
                 <h3 id="ff">方式</h3>
                    <div id="content-explain1-describe">
    
                    </div>
                </div>
                <div id="content-explain5">
                 <h3 id="ff">标准</h3>
                    <div id="content-explain1-describe">
   
                    </div>
                </div>
                
            </div>
            <div id="content-bot">
                <div id="img"></div>
                <a id="content-bot1" href="#"><img src="class/images/chat.png">咨询</a>
                <div id="content-bot2"></div>
                <a id="content-bot3" href="#"><img src="class/images/set.png">学历</a>
            </div>
            <div id="line-color"></div>

        </div>


 function select1(){
         /*点击跟换背景图*/
        document.getElementById("content-menu1").style.background = 'url(class/images/onclickMenu1.png)';
         document.getElementById("content-menu2").style.background='url(class/images/menu2.png)';
         document.getElementById("content-menu3").style.background='url(class/images/menu3.png)';
         document.getElementById("content-menu4").style.background='url(class/images/menu4.png)';
         document.getElementById("content-menu5").style.background='url(class/images/menu5.png)';
         /*点击显示相应的div*/
         document.getElementById("content-explain1").style.display="inline";
         document.getElementById("content-explain2").style.display="none";
         document.getElementById("content-explain3").style.display="none";
         document.getElementById("content-explain4").style.display="none";
         document.getElementById("content-explain5").style.display="none";
}
 function select2(){
        document.getElementById("content-menu2").style.background = 'url(class/images/onclickMenu2.png)';
         document.getElementById("content-menu1").style.background='url(class/images/menu1.png)';
         document.getElementById("content-menu3").style.background='url(class/images/menu3.png)';
         document.getElementById("content-menu4").style.background='url(class/images/menu4.png)';
         document.getElementById("content-menu5").style.background='url(class/images/menu5.png)';
         document.getElementById("content-explain2").style.display="inline";
         document.getElementById("content-explain1").style.display="none";
         document.getElementById("content-explain3").style.display="none";
         document.getElementById("content-explain4").style.display="none";
         document.getElementById("content-explain5").style.display="none";
}
 function select3(){
        document.getElementById("content-menu3").style.background = 'url(class/images/onclickMenu3.png)';
         document.getElementById("content-menu2").style.background='url(class/images/menu2.png)';
         document.getElementById("content-menu1").style.background='url(class/images/menu1.png)';
         document.getElementById("content-menu4").style.background='url(class/images/menu4.png)';
         document.getElementById("content-menu5").style.background='url(class/images/menu5.png)';
         document.getElementById("content-explain3").style.display="inline";
         document.getElementById("content-explain2").style.display="none";
         document.getElementById("content-explain1").style.display="none";
         document.getElementById("content-explain4").style.display="none";
         document.getElementById("content-explain5").style.display="none";
}
 function select4(){
        document.getElementById("content-menu4").style.background = 'url(class/images/onclickMenu4.png)';
         document.getElementById("content-menu2").style.background='url(class/images/menu2.png)';
         document.getElementById("content-menu3").style.background='url(class/images/menu3.png)';
         document.getElementById("content-menu1").style.background='url(class/images/menu1.png)';
         document.getElementById("content-menu5").style.background='url(class/images/menu5.png)';
         document.getElementById("content-explain4").style.display="inline";
         document.getElementById("content-explain2").style.display="none";
         document.getElementById("content-explain3").style.display="none";
         document.getElementById("content-explain1").style.display="none";
         document.getElementById("content-explain5").style.display="none";
}
 function select5(){
        document.getElementById("content-menu5").style.background = 'url(class/images/onclickMenu5.png)';
         document.getElementById("content-menu2").style.background='url(class/images/menu2.png)';
         document.getElementById("content-menu3").style.background='url(class/images/menu3.png)';
         document.getElementById("content-menu4").style.background='url(class/images/menu4.png)';
         document.getElementById("content-menu1").style.background='url(class/images/menu5.png)';
         document.getElementById("content-explain5").style.display="inline";
         document.getElementById("content-explain2").style.display="none";
         document.getElementById("content-explain3").style.display="none";
         document.getElementById("content-explain4").style.display="none";
         document.getElementById("content-explain1").style.display="none";
}

原创粉丝点击