創建index.heml

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

在body中，分塊

一整個頂部，命名為top

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

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

實現下拉功能

所以，再寫一個index_aboutAs

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

?移上去就會觸發，移開就什么也不會發生，如果點擊，也會調用goPage函數

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

goPage（）函數

function goPage(obj) {let height;//如果點擊的是本身，則白底，棕色字if (obj.name == preObj.name) {obj.style.color = '#65360a';obj.style.background = 'white';}//如果點擊的不是本身，本身變為棕色底，白字else {preObj.style.color = 'white';preObj.style.background = '#65360a';obj.style.color = '#65360a';obj.style.background = 'white';preObj = obj;} //如果點擊的是本身，則白底，棕色字 //如果點擊的不是本身，本身變為棕色底，白字

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

實現點擊圖片換圖功能

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

<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（）函數

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圖片的引用，構建出完整的六個網頁不變部分

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

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

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

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

跟隨動作，更換網頁內容

//iframe標簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面， // 例如我們可以在我們自己的網站頁面加載別人網站或者本站其他頁面的內容。 function goPage(obj) {let height;//如果點擊的是本身，則白底，棕色字if (obj.name == preObj.name) {obj.style.color = '#65360a';obj.style.background = 'white';}//如果點擊的不是本身，本身變為棕色底，白字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';//更改鏈接，達到轉換頁面內容的目的const ifr = document.getElementById('ifr');//在這里本來寫的是==，它提示可能因為意外類型導致，我更正==為===，避免意外類型if (page === '首頁'){height = 首頁;}if (page === '品牌與產品'){height = 品牌與產品;}if (page === '聯營合作'){height = 聯營合作;}if (page === '配套服務'){height = 配套服務;}if (page === '門店信息'){height = 門店信息;}if (page === '關于我們'){height = 關于我們;}//iframe標簽是框架的一種形式，也比較常用到，iframe一般用來包含別的頁面，// 例如我們可以在我們自己的網站頁面加載別人網站或者本站其他頁面的內容。ifr.style.height = height.toString() + 'px';ifr.src = url;}

起主要作用的是

const url = 'html/' + page + '.html'; //更改鏈接，達到轉換頁面內容的目的 ifr.src = url;

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。