html 写的选项卡问题
一个静态index.html页面，写了以下东西。看图比如上图，国内、国际、体育、财经四个选项卡打开这个页面默认显示的是第一个“国内”选项卡。问：怎么给后面三个选项卡生成三...
一个静态index.html页面，写了以下东西。看图
比如上图，国内、国际、体育、财经 四个选项卡
打开这个页面 默认显示的是第一个“国内”选项卡。
问：怎么给后面三个选项卡生成三个独立链接，用户只要点击链接，打开的页面就自动显示对应的选项卡？
用锚点可以实现吗？
简单点说，就是怎么让用户通过链接打开的这个页面就直接显示财经，或者体育。 展开
比如上图，国内、国际、体育、财经 四个选项卡
打开这个页面 默认显示的是第一个“国内”选项卡。
问：怎么给后面三个选项卡生成三个独立链接，用户只要点击链接，打开的页面就自动显示对应的选项卡？
用锚点可以实现吗？
简单点说，就是怎么让用户通过链接打开的这个页面就直接显示财经，或者体育。 展开
2个回答
展开全部
把下面这个代码保存为demo.html
尝试访问
demo.html?init=0
demo.html?init=1
demo.html?init=2
demo.html?init=3
就可以看到你想要的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.tab-panel{
margin:50px auto auto;
width:600px;
color:white;
}
.tab-head{
font-size:0;
background-color:orange;
}
.tab-head-item{
display:inline-block;
vertical-align:middle;
width:150px;
height:30px;
line-height:30px;
font-size:12px;
text-align:center;
cursor:default;
}
.tab-body{
width:100%;
height:300px;
background-color:purple;
}
.tab-body-item{
display:none;
height:100%;
text-align:center;
line-height:30px;
font-size:12px;
}
.tab-head-item.active{
background-color:purple;
}
.tab-body-item.active{
display:block;
}
</style>
<script>
window.addEventListener('load',function(){
var activeIndex = 0;
var tabHead = document.getElementsByClassName('tab-head')[0];
var activeTab = function(idx){
if(idx == activeIndex) return;
var headItems = document.getElementsByClassName('tab-head-item');
var bodyItems = document.getElementsByClassName('tab-body-item');
idx = idx < headItems.length ? idx : 0;
headItems[activeIndex].className = headItems[activeIndex].className.replace(/\sactive/,'');
bodyItems[activeIndex].className = bodyItems[activeIndex].className.replace(/\sactive/,'');
headItems[idx].className += ' active';
bodyItems[idx].className += ' active';
activeIndex = idx;
};
tabHead.addEventListener('mouseover',function(e){
var target= e.target,
idx = 0,
len = this.children.length;
if(!/^tab-head-item/.test(target.className))
return;
for(;idx<len;idx++){
if(this.children[idx] === target)
break;
}
activeTab(idx);
});
var init =/(?:^\?|&)init(?:\=)(\d+)(?=&|$)/.exec(location.search);
init = init && init[1] || 0;
activeTab(init);
});
</script>
</head>
<body>
<div class="tab-panel">
<div class="tab-head">
<div class="tab-head-item active">国内</div>
<div class="tab-head-item">国际</div>
<div class="tab-head-item">体育</div>
<div class="tab-head-item">财经</div>
</div>
<div class="tab-body">
<div class="tab-body-item active">国内</div>
<div class="tab-body-item">国际</div>
<div class="tab-body-item">体育</div>
<div class="tab-body-item">财经</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
锚点？还真不知道有这功能--.
用相对定位跟绝对定位吧，下面几个都是各自的div，跟下拉菜单一个性质，通过mouseover跟maouseout来控制其显示还是隐藏
用相对定位跟绝对定位吧，下面几个都是各自的div，跟下拉菜单一个性质，通过mouseover跟maouseout来控制其显示还是隐藏
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
