求一段网页代码
发布网友
发布时间：2022-04-07 08:57
共3个回答
热心网友
时间：2022-04-07 10:27
如果你要是想要不刷新页面和换页面 的 用DIV+CSS就可以实现
<!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=utf-8" />
<title>选项卡</title>
<style type="text/css">
/*
选项卡
----------------------------------------------------------------
*/
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;position:relative;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*选项卡的样式*/
.convention_tab{width:100%;text-align:left;float:left;}
.convention_tab li{margin:0;padding:0;float:left;padding-right:10px;position:relative;z-index:2;bottom:-1px;}
.convention_tab li a{background:#eee;height:28px;line-height:28px;overflow:hidden;float:left;padding:0 8px;border:solid 1px #444;border-bottom:none;}
.convention_tab li a:hover{background:#e0e0e0;color:#000;}
/*选中后的样式*/
.convention_tab li.current_tab a,.convention_tab li.current_tab a:hover{background:#999;color:#fff;padding-top:1px;}
/*单独设置第二个tab的某些样式*/
#nav2 li.current_tab a,#nav2 li.current_tab a:hover{background:#ffffe1;color:#000;}
/*切换区域*/
#cardarea,#cardarea2{border:solid 1px #666;text-align:left;clear:both;}
#cardarea p,#cardarea2 p,#cardarea2 dl{padding:20px;line-height:23px;}
#nav2{margin-top:18px;}
</style>
</head>
<body>
<div class="container">
<ul id="nav" class="convention_tab">
<li class="start_tab current_tab"><a href="#">选项卡001</a></li>
<li><a href="#">缺点</a></li>
<li><a href="#">仅供娱乐</a></li>
<li><a href="#">选项卡004</a></li>
<li id="end_tab"><a href="#">选项卡005</a></li>
</ul>
<div id="cardarea">
<div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
<p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在</html>以保证xhtml已经加载完毕</p>
<p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>
<p class="item display_none">第四个</p>
<p class="item display_none">第五个</p>
</div>
<ul id="nav2" class="convention_tab">
<li class="start_tab current_tab"><a href="#">优点</a></li>
<li><a href="#">使用方法</a></li>
<li><a href="#">参数的意思</a></li>
<li><a href="#">第4个</a></li>
<li id="end_tab"><a href="#">最后一个</a></li>
</ul>
<div id="cardarea2">
<p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> </span>即可完成事件添加,多个区域用竖线隔开。</p>
<div class="item display_none">
<dl>
<dt>id为kp_OtherRegional的input元素共有5个参数</dt>
<dd>第一个:表示id为nav的那个元素。</dd>
<dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>
<dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
<dd>第四个:<p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>
<dd>第五个:切换标签后当前标签的样式名。</dd>
</dl>
</div>
<p class="item display_none">这里是第四个区域</p>
<p class="item display_none">第五个</p>
</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
if(!document.getElementById || !document.getElementsByTagName)return;
var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
var configValue=configObj.getAttribute("value").replace(/\s/g,"");
var configArray=configValue.split("|")
var length=configArray.length;
var childConfigArray=null;
var childConfigValue="";
for(var i=0;i<length;i++){
childConfigArray=configArray[i].split(",");
giveEvent(childConfigArray);
}
//destroy(getConfigInputObj);
}
function giveEvent(obj){
if(obj==null){return;}
var parentId=obj[0];
var whichToTrigger=obj[1];
var itemParent=obj[2];
var itemClass=obj[3];
var currentClassName=obj[4];
var listerEvent=obj[5];
if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
var parentObj=null;
var whichToTriggerObj=null;
var itemParentObj=null;
var itemObj=null;
/*准备好各个元素*/
parentObj=document.getElementById(parentId);
if(!parentObj){return;}
itemParentObj=document.getElementById(itemParent);
whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
itemObj=itemParentObj.getElementsByTagName("*");
var length=itemObj.length;
var objArray=new Array();
for(var i=0;i<itemObj.length;i++){
if(itemObj[i].className.indexOf(itemClass)>-1){
objArray.push(itemObj[i]);
}
}
var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
var isExistAObj=null;
for(var i=0;i<whichToTriggerObjLength;i++){
whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));
whichToTriggerObj[i].setAttribute("currentNum",i);
if(listerEvent==null){
whichToTriggerObj[i].onclick=function(){
//return
return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
}
isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");
if(isExistAObj.length>0){
for(var j=0;j<isExistAObj.length;j++){
isExistAObj[j].onfocus=function(){this.blur();}
}
}
}else{
whichToTriggerObj[i].onmouseover=function(){
//return
return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
}
}
whichToTriggerObj[i].onfocus=function(){
this.blur();
}
}
//destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
var length=objArray.length;
var currentNum=parseInt(obj.getAttribute("currentNum"),10);
if(!objArray[currentNum]){
/*alert("该div不存在");*/
return;
}else{
/*先将所有样式 “归零”*/
for(var i=0;i<length;i++){
objArray[i].style.display="none";
if(whichToTriggerObj[i]==null){continue;}
//如果有老的样式
if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
}else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
}else{
whichToTriggerObj[i].className="";
}
}
//然后单独给当前对象加上className
if(objArray[currentNum]!=null){
objArray[currentNum].style.display="block";
if(obj.getAttribute("oldClassName")!=""){
obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
}else{
obj.className=currentClassName;
}
//return false;
}else{
//return true;
}
return false;
}
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>
热心网友
时间：2022-04-07 11:45
一个页面使用多个选项卡！tab选项卡！
http://www.feitec.com/ShowArt.asp?id=1139
仿126邮箱选项卡
推荐第二个，介绍的详细
热心网友
时间：2022-04-07 13:19
理论上不通啊。既然你可以修改加代码，那么人家也可以修改了。
主要看对方是用什么方法来修改你的文件的。
我也做网站，为了恶意修改这事儿下了不少功夫。如果有意我们可以交流交流。
