如果有幫助，請采納。
& lt！DOCTYPE？html & gt
& lthtml & gt
& lthead & gt
& ltmeta？charset="utf-8 " >
& lttitle & gtTab？主持人？演示& lt/title & gt；
& lt腳本
src="/jquery-3.3.1.js "
integrity = " sha 256-2 kok 7m boyxpguvvak/HJ 2 jigosys 2 auk 4 pfzbm 7 uh 60 = "
crossorigin="anonymous">。& lt/script & gt；
& ltstyle & gt
//?使得UL中的li標簽水平排列。
ul？{
顯示:內嵌；
空白:？nowrap
}
李？{
保證金:3px
浮動:左；
背景:紅色；
顯示:內嵌-塊；
}
。tab_menu？{
列表樣式:無；？/*?去掉ul前的符號？*/
邊距:？0px？/*?與外部元素的距離為0？*/
填充:？0px？/*?與內部元素的距離為0？*/
寬度:？自動；？/*?寬度根據元素的內容調整？*/
}
。tab_box？{
背景色:？# 465 c 71；？/*?背景顏色？*/
邊框:？1px？#4e667d？固體；？/*?邊界？*/
顏色:？# DDE 4 EC；？/*?文字顏色？*/
顯示:？屏蔽；？/*?此元素將顯示為塊級元素，前後帶有換行符。*/
行高:？1.35 em；？/*?行高？*/
填充:？4px？20px？/*?內部填充的距離？*/
文字-裝飾:？無；？/*?不顯示超鏈接下劃線？*/
空白:？nowrap？/*?對於文本中的空格，不會換行，文本會在同壹行繼續，直到遇到？& ltbr & gt？標簽。？*/
}
。入選？{
背景色:？綠色；
顯示:？屏蔽；
}
。藏起來？{
顯示:？無；
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？class="tab " >
& ltdiv？class="tab_menu " >
& ltul & gt
& lt李？class="selected " >Tab 1 < /li >
& lt李& gt選項卡2
& lt李& gt表3
& lt/ul & gt；
& lt/div & gt；& ltbr & gt& ltbr & gt& ltbr & gt
& ltdiv？class="tab_box " >
& ltdiv & gtTab 1:這是內容區編號1 < /div >
& ltdiv？class="hide " >選項卡2:這裏是第二個內容區域
& ltdiv？class="hide " >選項卡3:這裏是第三個內容區域
& lt/div & gt；
& lt/div & gt；
& lt腳本& gt
//?加上鼠標的點擊效果
$(function(){
$(“ul？李”)。單擊(函數(){
$(這個)。addClass("selected ")。兄弟姐妹()。remove class(" select ")；
var？指數？=?$(“ul？李”)。指數(這個)；
$("div.tab_box？& gt？div”)。eq(指數)。顯示()。兄弟姐妹()。hide()；
})
})
//?加上鼠標懸浮效果
$(function(){
$("div.tab_menu？ul？李”)。hover(function(){
$(這個)。addClass("selected ")。show()；
//?下面這個可以實現標簽頁的聯動效果。
var？指數？=?$(“ul？李”)。指數(這個)；
$("div.tab_box？& gt？div”)。eq(指數)。顯示()。兄弟姐妹()。hide()；
}，function(){
$(這個)。removeClass("selected ")。show()；
//?下面這個可以實現標簽頁的聯動效果。
var？指數？=?$(“ul？李”)。指數(這個)；
$("div.tab_box？& gt？div”)。eq(指數)。顯示()。兄弟姐妹()。hide()；
})
})
& lt/script & gt；
& lt/body & gt；