導航:首頁 > 萬維百科 > 網頁設計tab健怎麼實現
網頁設計tab健怎麼實現
發布時間：2020-11-15 00:35:331、dreamweaver網頁製作
說的不太清楚『
你說的滑動效果，還是
什麼
給你個代碼，看是不是你要的效果：
<head>
<style>
body
{
text-align:center;
}
.tab
{
width:422px;
height:208px;
margin:0 auto;
overflow:hidden;
border:1px solid #cccccc;
}
.menu,.menu li
{
margin:0;
padding:0;
height:24px;
list-style:none;
overflow:hidden;
text-align:center;
}
.menu
{
border-bottom:1px solid #cccccc;
}
.menu .default
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
background:url('http://www.webjx.com/upfiles/20070905/20070905212648_01.jpg') no-repeat;
}
.menu .active
{
width:84px;
float:left;
font-size:10pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
font-weight:bold;
color:#FFFFFF;
background:url('http://www.webjx.com/upfiles/20070905/20070905212705_02.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
width:76px;
float:left;
font-size:14pt;
line-height:1.5;
margin-left:1px;
cursor:pointer;
color:#0000FF;
text-align:right;
font-weight:bold;
}
.con
{
width:422px;
height:184px;
margin:0 auto;
}
</style>
<head>
<body>
<script>
var tb_h=new Array()
function init(ids,cons,dis,hids,tbs){
document.getElementById(ids).getElementsByTagName('li')[0].className='active';
document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,hids);}//滑鼠指向激發效果
// document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis,hids);}//點擊激發效果
var obj_tab=document.getElementById(tbs)
tb_h[tbs]=obj_tab.offsetHeight;
}
function onmousOver(ids,cons,dis,hids){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
if (obj.className=='active'||obj.id==hids)return;
var o=document.getElementById(ids).getElementsByTagName('li');
for (var i=0;i<=o.length-2;i++){o[i].className='default'}
obj.className='active';
if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
function show_con(tbs,ids,hids){
var obj_click=document.getElementById(hids);
obj_click.innerHTML=(obj_click.innerHTML=="+")?"-":"+"
obj_click.className=(obj_click.className=='showme')?'hidme':'showme'
var hid=(obj_click.className=='showme')?1:-1
var obj_tab=document.getElementById(tbs)
var obj_nav=document.getElementById(ids)
var h_m=obj_nav.offsetHeight+2
var H=tb_h[tbs]
var n=20,t=50;
var timers=new Array(n);
if (hid<0){
for(var i=0;i<n;i++){(
function(){
if(timers[i]) clearTimeout(timers[i]);
var j=i;
timers[i]=setTimeout(function(){obj_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
}
)()};
}
if (hid>0){
for(var i=0;i<n;i++){(
function(){
if(timers[i]) clearTimeout(timers[i]);
var j=i;
timers[i]=setTimeout(function(){obj_tab.style.height=h_m+Math.round(H*(j+1)/n);},(i+1)*t);
}
)()};
}
}
</script>
<!--#1-->
<div id='tab1' class='tab'>
<ul id='nav1' class='menu'>
<li id="l1" class='default'>第一新聞</li>
<li id="l2" class='default'>第二新聞</li>
<li id="l3" class='default'>第三新聞</li>
<li id="hid1" class="showme"style="width:160px" onclick="show_con('tab1','nav1','hid1')">-</li>
</ul>
<div class='con' id='con1'>
</div>
</div>
<div style="display:none">
<div id="div1_l1">
<span>要做一個選項卡，在論壇里找了好久都沒有理想的效果</span>
</div>
<div id="div1_l2">
<span>所以特來問一下高手們，請大家幫幫忙！</span>
</div>
<div id="div1_l3">
<span>找了幾個來改，都是頭部的菜單那裡太難定位了</span>
</div>
</div>
<script>
init('nav1','con1',"div1_","hid1",'tab1');
</script>
<!--#2-->
<div id='tab2' class='tab'>
<ul id='nav2' class='menu'>
<li id="l1" class='default'>第一新聞</li> ;
<li id="l2" class='default'>第二新聞</li>
<li id="l3" class='default'>第三新聞</li>
<li id="l4" class='default'>第四新聞</li>
<li id="hid2" class="showme" onclick="show_con('tab2','nav2','hid2')">-</li>
</ul>
<div class='con' id='con2'>
</div>
</div>
<div style="display:none">
<div id="div2_l1">
<span>要做一個選項卡，在論壇里找了好久都沒有理想的效果</span>
</div>
<div id="div2_l2">
<span>所以特來問一下高手們，請大家幫幫忙！</span>
</div>
<div id="div2_l3">
<span>找了幾個來改，都是頭部的菜單那裡太難定位了</span>
</div>
<div id="div2_l4">
<span>當滑鼠放上去時就變，而不用點了！</span>
</div>
</div>
<script>
init('nav2','con2',"div2_","hid2",'tab2');
</script>
<!--#3-->
<div id='tab3' class='tab'>
<ul id='nav3' class='menu'>
<li id="l1" class='default'>第一新聞</li>
<li id="l2" class='default'>第二新聞</li>
<li id="l3" class='default'>第三新聞</li>
<li id="l4" class='default'>第四新聞</li>
<li id="hid3" class="showme" onclick="show_con('tab3','nav3','hid3')">-</li>
</ul>
<div class='con' id='con3'>
</div>
</div>
<div style="display:none">
<div id="div3_l1">
<span>要做一個選項卡，在論壇里找了好久都沒有理想的效果</span>
</div>
<div id="div3_l2">
<span>所以特來問一下高手們，請大家幫幫忙！</span>
</div>
<div id="div3_l3">
<span>找了幾個來改，都是頭部的菜單那裡太難定位了</span>
</div>
<div id="div3_l4">
<span>當滑鼠放上去時就變，而不用點了！</span>
</div>
</div>
<script>
init('nav3','con3',"div3_","hid3",'tab3');
</script>
</body>
</html>
2、網頁設計，像這種網頁滑鼠劃過紅色部分，黃色部分的內容跟著變化，這種效果要怎麼編寫代碼？求大神教，在
可以參照下面寫法
.tabcontent .tabitem{display:none;}<div class="tab"><a class="tabs">第一個tab</a>
<a class="tabs">第二個tab</a>
</div>
<div class="tabcontent">
<div class="tabitem" style="display:block;">
這是第一個tab要顯示的
</div>
<div class="tabitem">
這是第二個tab要顯示的
</div>
</div>//用jq
$(".tab a").click(function(){
$(".tabcontent .tabitem").eq($(this).index()).show().siblings().hide();
$(this).addClass("on").siblings().removeClass("on");
})
3、html網頁設計div+css下圖的效果怎麼做？
你百度一下 選項卡切換js代碼
然後會看到很多
打開學習學習就可以了
（懶人tuku 裡面有 免費的代碼）
----------滿意望採納-------------
4、網頁製作tab標簽樣式的問題,一打開會把之後標簽的東西全部顯示出來
把其他tab li 元素 隱藏 使用hidden 屬性
或者加上這個 style="display:none"
5、DW中tab布局網站對設計有什麼影響？
本人從事網站設計多年這個不僅是在DW中，在所有的網頁設計中含有TAB對網站和網頁的收錄都是有影響的。所以現在的網頁基本都是使用css來布局。
6、網頁設計中，有一個詞tab 與tab標簽到底指的是什麼？有什麼區別？求截圖！~~多謝！
這個就是tab標簽
都是用腳本實現的
7、HTML、PHP、網頁設計，求一個屏幕上方的tab按鈕，類似下圖
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#container {background:#666666; float:left;}
#container ul li {list-style:none;font-weight:bold;color:#FFFFFF; cursor:pointer; float:left; margin:13px;}
#container ul li.aa{ border-bottom:3px #00CC33 solid;}
</style>
</head>
<body>
<div id="container">
<ul>
<li class="aa">Home</li>
<li>About Us</li>
<li>Our Work</li>
<li>Blog</li>
<li>Careers</li>
<li>Contant Us</li>
</ul>
</div>
</body>
</html>
差不多就這樣吧。具體布局在你自己的div裡面調。 我這個是一個ul來實現的 滑鼠點擊字體下劃線變色（這個在JS中實現，估計你能明白）。字體下劃線用border-bottom來實現
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#container {width:100%; height:100px;background:#666666; float:left; position:relative;}
#container ul {position:absolute; right:10px; top:10px;}
#container ul li {list-style:none;font-weight:bold;color:#FFFFFF; cursor:pointer; float:left; margin:13px; }
#container ul li.aa{ border-bottom:3px #00CC33 solid;}
</style>
</head>
<body>
<div id="container">
<ul>
<li class="aa">Home</li>
<li>About Us</li>
<li>Our Work</li>
<li>Blog</li>
<li>Careers</li>
<li>Contant Us</li>
</ul>
</div>
</body>
</html>
我有改了改，
8、網頁設計用了js的tab切換效果，如何使版權信息一直在最底下？望解答。謝謝
position: fixed;
bottom:0px;
left: 50%;
用固定定位
9、求助！網頁製作，請教如何在首頁設置個性化菜單和幻燈片？
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<style type="text/css">
.clear{clear:both;}
.nav{background-color:#CCFF00;width:500px;font-size:20px;}
.nav .tab{background-color:#cccccc;color:#333333;padding-left:5px;padding-right:5px;}
.nav .tab_active{background-color:#ffffff;color:#333333;padding-left:5px;padding-right:5px;}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;" class="tab_active" id="tab_1" onmouseover="changeTab('1');">11111</a>
<a href="javascript:;" class="tab" id="tab_2" onmouseover="changeTab('2');">22222</a>
<a href="javascript:;" class="tab" id="tab_3" onmouseover="changeTab('3');">33333</a>
<a href="javascript:;" class="tab" id="tab_4" onmouseover="changeTab('4');">44444</a>
<div class="clear"></div>
</div>
<div id="pages_1" class="pages_1" style="display:block;">圖片列表1</div>
<div id="pages_2" class="pages_2" style="display:none;">圖片列表2</div>
<div id="pages_3" class="pages_3" style="display:none;">圖片列表3</div>
<div id="pages_4" class="pages_4" style="display:none;">圖片列表4</div>
</body>
</html>
<script type="text/javascript">
var global_active_tab="1"
function changeTab(tab){
$("#pages_"+global_active_tab).css("display","none");
$("#tab_"+global_active_tab).attr("class","tab");
global_active_tab=tab
$("#pages_"+global_active_tab).css("display","block");
$("#tab_"+global_active_tab).attr("class","tab_active");
}
</script>
這個我以前寫的一個簡單的例子，你改改樣式就能用了，用的是jquery寫的，你得去下個jquery的包，百度搜就有，在第一行的文件路徑裡面替換了就行
與網頁設計tab健怎麼實現相關的知識
- 網頁設計中怎樣鏈接css
- 站長扣除是什麼意思
- 農機站長主要表現
- 權威的贛州網站建設
- 大客流值班站長的職責
- 二段煤氣爐站長招聘
- 表單在動態網頁設計中的作用
- 帝國cms瀑布流模板
- 網站建設功能需求有哪些
- 比較好的圖片設計網站有哪些
- cms對接網
- 簡單的網頁頁面設計用什麼軟體
- 競選廣播站長
- 傾世cms破解
- 鶴壁超限站站長
- 濟南產經報站長是什麼級別
- 網頁設計師能力
- cms是什麼牌子的點歌機
- 中國最牛逼的設計網站
- 收費站站長主要職能
- 新浪cms稿源系統指的是
- 400路終點站長鳴路
- 站長工具收入信息
- 魔方小站站長教學視頻6
- 朝宋站長爬牆
- 三毛室內設計網站
- 鐵路長沙站站長級別
- 網頁設計怎樣添加flash
- 簽名設計好網站
- 廣播站站長和大隊長
- cms是哪個監控
- 服裝設計網站哪個好
- 網站設計計劃
- 貓網頁設計
- 精通html5網頁設計
- 下一站長沙
- 路政副站長年度考核表
- 網站建設技術規范
- 自己設計旅行路線網站
- 誰有電商網站的mongodb設計
- 帝國cms變數標簽
- 河南省住房建設廳網站
- 設計裝修風格網站
- 上海高端網站建設服
- 新會邊檢站現任站長
- 福彩站長
- 帝國cms復選框
- 湖南腫瘤醫院離哪站長沙城鐵近