社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 JS CSS實作仿msn風格選項卡效果程式碼_javascript技巧

JS CSS實作仿msn風格選項卡效果程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:35 PM
css js 選項卡

本文實例講述了JS CSS實作仿msn風格選項卡效果程式碼。分享給大家參考，具體如下：

這是一款來自MSN網站的選項卡，清新淡藍色風格，新聞類、資訊類、文章類網站都比較適合使用，代碼擴展性高，W3C標準設計，兼容IE、火狐等多種瀏覽器，整體效果非常好。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/

具體程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>msn 选项卡</title>
<style type="text/css">
body {text-align:center;color:#666;font-size:12px;font-family:tahoma,arial,sans-serif;}
h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}
li{list-style:none;}
a img{border:none;}
a:link{text-decoration:none;color:#07519A;}
a:visited{text-decoration:none;color:#07519A;}
a:active,a:hover{text-decoration:underline;color:#07519A;}
.tarea0{float:left;height:220px;width:242px;}
.tarea{border:1px solid #ace;float:left;height:156px;text-align:center;width:242px;}
.tarea1{border:1px solid #ace;float:left;height:251px;text-align:center;width:242px;}
.tarea2{border:1px solid #ace;float:left;height:217px;text-align:center;width:243px;}
ul.tbtn li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-decoration:none;width:60px;background:url(images/msfp_015.gif) repeat-x;}
ul.tbtn li:hover{text-decoration:underline;}
ul.tbtn li.curr{background:#fff;border-bottom-color:#fff;cursor:default;color:#666;}
.tbcon{margin:8px 0px 6px 8px;text-align:left;padding:8px;}
</style>
<script language="javascript" type="text/javascript">
function tabit(btn){
 var idname = new String(btn.id);
 var s = idname.indexOf("_");
 var e = idname.lastIndexOf("_")+1;
 var tabName = idname.substr(0, s);
 var id = parseInt(idname.substr(e, 1));
 var tabNumber = btn.parentNode.childNodes.length;
 for(i=0;i<tabNumber;i++){
  document.getElementById(tabName+"_div_"+i).style.display = "none";
  document.getElementById(tabName+"_btn_"+i).className = "";
 };
  document.getElementById(tabName+"_div_"+id).style.display = "block";
  btn.className = "curr";
};
</script>
</head>
<body>
<div class="tarea2" style="height:223px;">
 <ul class="tbtn">
 <li onclick="tabit(this)" id="tabap1_btn_0" class="curr">最新上传</li>
 <li onclick="tabit(this)" id="tabap1_btn_1">分类导航</li>
 <li onclick="tabit(this)" id="tabap1_btn_2">网页特效</li>
 <li style="border-right:none;" onclick="tabit(this)" id="tabap1_btn_3">浏览排行</li>
 </ul>
 <div class="clr"></div>
 <div class="tbcon" id="tabap1_div_0">这里是最新上传的内容</div>
 <div style="display: none;" class="tbcon" id="tabap1_div_1">这里是分类导航</div>
 <div style="display: none;" class="tbcon" id="tabap1_div_2">网页特效的内容</div>
 <div style="display: none;" class="tbcon" id="tabap1_div_3">浏览排行</div>
 </div>
</body>
</html>
登入後複製

希望本文所述對大家JavaScript程式設計有所幫助。

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前 By DDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7434
15
CakePHP 教程
1359
52
steam的賬戶名稱是什麼格式
76
11
win11激活密鑰永久
29
19
顯示更多
Related knowledge
Bootstrap列表如何移除默認樣式？ Bootstrap列表如何移除默認樣式？ Apr 07, 2025 am 10:18 AM

Bootstrap 列表的默認樣式可以通過 CSS 覆蓋來移除。使用更具體的 CSS 規則和選擇器，遵循 "就近原則" 和 "權重原則"，覆蓋 Bootstrap 默認的樣式。為避免樣式衝突，可使用更具針對性的選擇器。如果遇到覆蓋不成功的情況，可調整自定義 CSS 的權重。同時注意性能優化，避免過度使用 !important，撰寫簡潔高效的 CSS 代碼。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap如何上傳文件 bootstrap如何上傳文件 Apr 07, 2025 pm 01:09 PM

可以通過 Bootstrap 實現文件上傳功能，步驟如下：引入 Bootstrap CSS 和 JavaScript 文件；創建文件輸入字段；創建文件上傳按鈕；處理文件上傳（使用 FormData 收集數據，然後發送到服務器）；自定義樣式（可選）。

bootstrap怎麼佈局 bootstrap怎麼佈局 Apr 07, 2025 pm 02:24 PM

使用 Bootstrap 佈局網站，需要使用網格系統，將頁面劃分為容器、行和列。首先添加容器，然後在其中添加行，並在行內添加列，最後在列中添加內容。 Bootstrap 的響應式佈局功能根據斷點（xs、sm、md、lg、xl）自動調整佈局，通過使用響應式類可以實現不同屏幕尺寸下的不同佈局。

怎麼建立bootstrap框架 怎麼建立bootstrap框架 Apr 07, 2025 pm 12:57 PM

要建立 Bootstrap 框架，請按照以下步驟操作：通過 CDN 或安裝本地副本安裝 Bootstrap。創建一個 HTML 文檔，將 Bootstrap CSS 鏈接到 &lt;head&gt; 部分。添加 Bootstrap JavaScript 文件到 &lt;body&gt; 部分。使用 Bootstrap 組件並自定義樣式表以滿足您的需要。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

Bootstrap列表如何改變大小？ Bootstrap列表如何改變大小？ Apr 07, 2025 am 10:45 AM

Bootstrap 列表的大小取決於包含列表的容器的大小，而不是列表本身。使用 Bootstrap 的網格系統或 Flexbox 可以控制容器的大小，從而間接調整列表項的大小。

See all articles