您现在的位置是：首页 > 网站建设网站建设

div+css里面tab切换技术是什么

江湖快报网2023-01-17 12:21:32【网站建设】人已围观

简介看看首页就知道了啊。
页面正中的栏目，Featured 、Entertainment、Sports、Video几个就是Tab，点击后可以在不刷新页面的情况下，在有限的空间显示不同页面的内容。
其实平时我们

看看首页就知道了啊。
页面正中的栏目，Featured 、Entertainment、Sports、Video几个就是Tab，点击后可以在不刷新页面的情况下，在有限的空间显示不同页面的内容。
其实平时我们用的IE7、遨游、firefox等浏览器也可以用不同Tab打开不同的页面，然后自由切换浏览不同的页面。
不知明白了没有？

WEB标准化：纯DIV+CSS怎么做这种切换的效果？

纯DIV+CSS是实现不了那种效果的，这种技术叫：Tab选项卡，链接中有例子的，去参考下吧！！

DIV块内容切换

按照你说的，两个div块比较简单，代码如下

<div id='myDiv'>
<div id='div1' style='width:200;height:100;background-color:#FF0000'>
<span style='cursor:hand' onclick='move(this)'>向下</span>
</div>
<div id='div2' style='width:200;height:100;background-color:#00FF00'>
<span style='cursor:hand' onclick='move(this)'>向上</span>
</div>
</div>
<script>
function move(obj) {
var upobj = obj.parentElement.parentElement.childNodes[0];
var downobj = obj.parentElement.parentElement.childNodes[1];
var myDiv = document.getElementById('myDiv');
myDiv.removeChild(upobj);
myDiv.removeChild(downobj);
myDiv.appendChild(downobj);
myDiv.appendChild(upobj);
syncPos();
}

function syncPos() {
var myDiv = document.getElementById('myDiv');
myDiv.childNodes[0].innerHTML = <span style='cursor:hand' onclick='move(this)'>向下</span>;
myDiv.childNodes[1].innerHTML = <span style='cursor:hand' onclick='move(this)'>向上</span>;
}
</script>

三个div块比较复杂，我的做法不一定是最优的，只是简单实现了你的需求

<div id='myDiv'>
<div id='div1' style='width:200;height:100;background-color:#FF0000'>
<span style='cursor:hand' onclick='moveDown(this)'>向下</span>
</div>
<div id='div2' style='width:200;height:100;background-color:#FFFF00'>
<span style='cursor:hand' onclick='moveDown(this)'>向下</span> <span style='cursor:hand' onclick='moveUp(this)'>向上</span>
</div>
<div id='div3' style='width:200;height:100;background-color:#0000FF'>
<span style='cursor:hand' onclick='moveUp(this)'>向上</span>
</div>
</div>
<script>
function moveUp(obj) {
var upobj = obj.parentElement.parentElement.childNodes[0];
var midobj = obj.parentElement.parentElement.childNodes[1];
var downobj = obj.parentElement.parentElement.childNodes[2];
var flag = obj.parentElement.parentElement.childNodes[1] == obj.parentElement;
var myDiv = document.getElementById('myDiv');
myDiv.removeChild(upobj);
myDiv.removeChild(midobj);
myDiv.removeChild(downobj);
if (flag) {
myDiv.appendChild(midobj);
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
}
else {
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
myDiv.appendChild(midobj);
}
syncPos();
}

function moveDown(obj) {
var upobj = obj.parentElement.parentElement.childNodes[0];
var midobj = obj.parentElement.parentElement.childNodes[1];
var downobj = obj.parentElement.parentElement.childNodes[2];
var flag = obj.parentElement.parentElement.childNodes[1] == obj.parentElement;
var myDiv = document.getElementById('myDiv');
myDiv.removeChild(upobj);
myDiv.removeChild(midobj);
myDiv.removeChild(downobj);
if (flag) {
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
myDiv.appendChild(midobj);
}
else {
myDiv.appendChild(midobj);
myDiv.appendChild(upobj);
myDiv.appendChild(downobj);
}
syncPos();
}

function syncPos() {
var myDiv = document.getElementById('myDiv');
myDiv.childNodes[0].innerHTML = <span style='cursor:hand' onclick='moveDown(this)'>向下</span>;
myDiv.childNodes[1].innerHTML = <span style='cursor:hand' onclick='moveDown(this)'>向下</span> <span style='cursor:hand' onclick='moveUp(this)'>向上</span>;
myDiv.childNodes[2].innerHTML = <span style='cursor:hand' onclick='moveUp(this)'>向上</span>;
}
</script>