导航:首页 > 万维百科 > 网页设计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复选框
- 湖南肿瘤医院离哪站长沙城铁近