<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#tab{
display: flex;
flex-flow:row;
list-style: none;
}
#tab li a{
display: inline-block;
text-decoration: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color:black;
}
#container {
position: relative;
}
#content1,
#content2,
#content3,
#content4,
#content5,#content6{
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab li:first-child,
#content1 {
background-color: lightblue;
}
#tab li:first-child+li,
#content2 {
background-color: palegreen;
}
#tab li:first-child+li+li,
#content3 {
background-color: yellowgreen;
}
#tab li:first-child+li+li+li,
#content4 {
background-color: red;
}
#tab li:first-child+li+li+li+li,
#content5 {
background-color: orchid;
}
#tab li:first-child+li+li+li+li+li,
#content6 {
background-color:cadetblue;
}
button{
background-color: gold;
border-style:none;
}
.li1{
background-color:lightblue ;
}
</style>
</head>
<body>
<h2>实现多标签页效果</h2>
<div class="tabs">
<ul id="tab">
<li><a href="#content1" data-toggle="tab" data-id="content1" class="li1">10元套餐</a></li>
<li><a href="#content2" data-toggle="tab" data-id="content2" class="li2">30元套餐</a></li>
<li><a href="#content3" data-toggle="tab" data-id="content3" class="li3">50元包月</a></li>
<li><a href="#content4" data-toggle="tab" data-id="content4" class="li3">50元包月</a></li>
<li><a href="#content5" data-toggle="tab" data-id="content5" class="li3">50元包月</a></li>
</ul>
<div id="container">
<!-- 加style 然初始页面是第一个 -->
<div id="content1" style="z-index:10">
10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2">
<a href="11.html">11</a>
30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3">
<a href="11.html">22</a>
60元包月详情：<br /> 每月无限量随心打
</div>
<div id="content4">
<a href="11.html">33</a>
70元包月详情：<br /> 每月无限量随心打
</div>
<div id="content5">
<a href="11.html">44</a>
80元包月详情：<br /> 每月无限量随心打
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var tabs=document.querySelectorAll("[data-toggle=tab]");
var z=10;
var id=sessionStorage.getItem("tab") ;
console.log(z,"z");
for(let tab of tabs){
tab.onclick=function(){
var id=this.dataset.id;
console.dir(this,"this")
console.log(this,"this1");
var div=document.getElementById(id);
// this.dataset.id=this.getAttribute("data-id")
z++;
div.style.zIndex=z;
sessionStorage.setItem("tab",id);
}
}
if(id){
var divs=document.getElementById(id);
divs.style.zIndex=z;
}
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
#container{
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<div id="container">
<p id="p1">div1</p>
<p id="p2">div2</p>
<p id="p3">div3</p>
<p id="p4">div4</p>
<p id="p5">div5</p>
<p id="p6">div6</p>
<p id="p7">div7</p>
<p id="p8">div8</p>
<p id="p9">div9</p>
</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>
<span id="totalSecond">3</span>秒后自动返回
</body>
<script>
// $(document).ready(function() {
// $("#p1").click(function() {
// console.log(1111);
// $("html, body").animate({
// scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
// return false;
// });
// $("#p2").click(function() {
// $("html, body").animate({
// scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
// return false;
// });
// $("#p3").click(function() {
// $("html, body").animate({
// scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
// return false;
// });
//滑动效果不理想
// for(var i=0;i<9;i++){
// $("p").click(function(){
// $("html,body").animate({
// scrollTop:$("div").offset().top},{duration: 500,easing: "swing"});
// return false;
// });
// }
//倒计时3秒返回页面
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1) //判断是IE浏览器还是Firefox浏览器，采用相应措施取得秒数
{
second = document.getElementById('totalSecond').innerText;
} else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 500); //每1秒钟调用redirect()方法一次
function redirect()
{
//跳转回之前的页面
if (second < 0)
{
location.href = '24.html';
var button=document.getElementById("btn");
var clientHeight=button.clientHeight;
var clientWidth=button.clientWidth;
console.log( clientHeight,clientWidth);
} else
{
if (navigator.appName.indexOf("Explorer") > -1)
{
document.getElementById('totalSecond').innerText = second--;
} else
{
document.getElementById('totalSecond').textContent = second--;
}
}
}
// })
</script>
</html>这个解决方式想了几个点
一个是sessionstaoag,图上代码也用的是这种方法
第二种思路是找到按钮的位置，根据位置来返回，不过这种没写出来也就不知道能否实现
版权声明：本文为A123ppleQueen原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。