創(chuàng)建index.heml

----------------------------------------------------------------------

在body中，分塊

一整個頂部，命名為top

<div id="top"><input type="button" id="inp1" value="首頁" name="首頁" onclick="goPage(this)" /><input type="button" id="inp2" value="品牌與產(chǎn)品" name="品牌與產(chǎn)品" onclick="goPage(this)" /><input type="button" id="inp3" value="聯(lián)營合作" name="聯(lián)營合作" onclick="goPage(this)" /><input type="button" id="inp4" value="配套服務(wù)" name="配套服務(wù)" onclick="goPage(this)" /><input type="button" id="inp5" value="門店信息" name="門店信息" onclick="goPage(this)" /><input type="button" id="inp6" value="關(guān)于我們" onmouseover="mouseover()" onmouseleave="mouseleave()" /> </div>

--------------------------------------------------------------------------

實(shí)現(xiàn)下拉功能

所以，再寫一個index_aboutAs

<div id="index_aboutAs"> <!-- mouseover 鼠標(biāo)mouseover與mouseenter mouseover事件：不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。mouseleave. 指點(diǎn)設(shè)備（通常是鼠標(biāo)）的指針移出某個元素時，會觸發(fā) mouseleave 事件 --><input type="button" id="inp7" value="企業(yè)" name="關(guān)于我們" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" /><input type="button" id="inp8" value="加入我們" name="聯(lián)營合作" onclick="goPage(this)" onmouseover="mouseover()" onmouseleave="mouseleave()" /> </div>

?

?----------------------------------------------------------------------------------------------

function mouseover() {const aboutAs = document.getElementById('index_aboutAs');aboutAs.style.display = 'block';}function mouseleave() {const aboutAs = document.getElementById('index_aboutAs');aboutAs.style.display = 'none';} <!-- mouseover 鼠標(biāo)mouseover與mouseenter mouseover事件：不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。mouseleave. 指點(diǎn)設(shè)備（通常是鼠標(biāo)）的指針移出某個元素時，會觸發(fā) mouseleave 事件 -->

?移上去就會觸發(fā)，移開就什么也不會發(fā)生，如果點(diǎn)擊，也會調(diào)用goPage函數(shù)

----------------------------------------------------------------------------------------------

goPage（）函數(shù)

function goPage(obj) {let height;//如果點(diǎn)擊的是本身，則白底，棕色字if (obj.name == preObj.name) {obj.style.color = '#65360a';obj.style.background = 'white';}//如果點(diǎn)擊的不是本身，本身變?yōu)樽厣?#xff0c;白字else {preObj.style.color = 'white';preObj.style.background = '#65360a';obj.style.color = '#65360a';obj.style.background = 'white';preObj = obj;} //如果點(diǎn)擊的是本身，則白底，棕色字 //如果點(diǎn)擊的不是本身，本身變?yōu)樽厣?#xff0c;白字

-----------------------------------------------------------------------------------------------

實(shí)現(xiàn)點(diǎn)擊圖片換圖功能

所以再寫一個對于圖片的引用

<div align="center" style="margin-top: -2px;"><img id="img1" src="imgs/無與倫比的美味.png" width="1300px" height="600px" onclick="changeMap(this)" /><img id="img2" src="imgs/無與倫比的美味2.png" width="1300px" height="600px" style="display: none" onclick="changeMap(this)" /><img id="img3" src="imgs/無與倫比的美味3.png" width="1300px" height="600px" style="display: none" onclick="changeMap(this)" /><img id="img4" src="imgs/無與倫比的美味4.png" width="1300px" height="600px" style="display: none" onclick="changeMap(this)" /> </div>

?-----------------------------------------------------------------------------------------

changeMap（）函數(shù)

function changeMap(obj) {const imgId = obj.id;obj.style.display = 'none';if (imgId == 'img1') {document.getElementById('img2').style.display = 'block';}if (imgId == 'img2') {document.getElementById('img3').style.display = 'block';}if (imgId == 'img3') {document.getElementById('img4').style.display = 'block';}if (imgId == 'img4') {document.getElementById('img1').style.display = 'block';}}

--------------------------------------------------------------------------------------------

最后寫一個botton圖片的引用，構(gòu)建出完整的六個網(wǎng)頁不變部分

--------------------------------------------------------------------------------------------

此時，除了top欄，都是首頁.html的內(nèi)容，所以可以更換別的頁面，只需要更改鏈接

<div align="center" style="margin-top: -4px"> <!-- iframe標(biāo)簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面 ，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站或者本站其他頁面的內(nèi)容。--><iframe id="ifr" src="html/首頁.html" width="1300px" scrolling="no" style="height: 800px; border: none;" marginwidth="0px" marginheight="0px"></iframe> <!--此時，除了top，bottom欄，都是首頁.html的內(nèi)容，所以可以更換別的頁面，只需要更改鏈接--> </div> <!-- iframe標(biāo)簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面 ，例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站或者本站其他頁面的內(nèi)容。-->

-------------------------------------------------------------------------------------------------

跟隨動作，更換網(wǎng)頁內(nèi)容

//iframe標(biāo)簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面， // 例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站或者本站其他頁面的內(nèi)容。 function goPage(obj) {let height;//如果點(diǎn)擊的是本身，則白底，棕色字if (obj.name == preObj.name) {obj.style.color = '#65360a';obj.style.background = 'white';}//如果點(diǎn)擊的不是本身，本身變?yōu)樽厣?#xff0c;白字else {preObj.style.color = 'white';preObj.style.background = '#65360a';obj.style.color = '#65360a';obj.style.background = 'white';preObj = obj;}const page = obj.name;//這里在拼接url的鏈接const url = 'html/' + page + '.html';//更改鏈接，達(dá)到轉(zhuǎn)換頁面內(nèi)容的目的const ifr = document.getElementById('ifr');//在這里本來寫的是==，它提示可能因為意外類型導(dǎo)致，我更正==為===，避免意外類型if (page === '首頁'){height = 首頁;}if (page === '品牌與產(chǎn)品'){height = 品牌與產(chǎn)品;}if (page === '聯(lián)營合作'){height = 聯(lián)營合作;}if (page === '配套服務(wù)'){height = 配套服務(wù);}if (page === '門店信息'){height = 門店信息;}if (page === '關(guān)于我們'){height = 關(guān)于我們;}//iframe標(biāo)簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面，// 例如我們可以在我們自己的網(wǎng)站頁面加載別人網(wǎng)站或者本站其他頁面的內(nèi)容。ifr.style.height = height.toString() + 'px';ifr.src = url;}

起主要作用的是

const url = 'html/' + page + '.html'; //更改鏈接，達(dá)到轉(zhuǎn)換頁面內(nèi)容的目的 ifr.src = url;

總結(jié)

以上是生活随笔為你收集整理的耀炎食品-1.index的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。