请sun领分 谢谢~~~~~~~~没有别的要说的~~~~还有就是刚才给您的短消息 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <html> <head> <title>感激网</title> <style> body{ font-size: 10pt; } #c{ border: solid red 0px; background-color: #E4F0F8; height: 250px; width: 1000px; padding-top: 5px; } #title{ height: 28px; width: 100%; border: solid blue 0px; } #title ul{ margin: 0px 0px 0 0; list-style: none; height: 100%; } .title_item_selected{ display: block; float: left; height: 100%; margin: 0 10 0 0; padding: 0; background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px; } .title_item{ display: block; float: left; height: 100%; margin: 0 10 0 0; padding: 0; /*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;*/ } .title_item_text_selected{ border: solid red 0px; float: left; text-decoration:none; margin:0 0 0 6px; padding:10 6 0 0px; display: block; height: 100%; background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px; cursor: default; } .title_item_text{ border: solid red 0px; float: left; text-decoration:none; margin:0 0 0 6px; padding:10 6 0 0px; display: block; height: 100%; line-height: 20px; /*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;*/ cursor: default; } #content{ height: auto; width: 100%; border: solid blue 0px; } #content .tb{ margin: 0 6px 6px 6px; padding: 5px; border: solid red 0px; background-color: #fff; height: 100%; width: 100%; } #foot{ height: 40px; width: 100%; border: solid blue 0px; } img{ border: none; } </style> </head> <body onload=""> author: <a href="http://blog.csdn.net/sunxing007">blog.csdn.net/sunxing007</a> <br><br> <div id='c'> <div id='title'> <ul id='myUL'> <li style="margin-left: 3px;" class="title_item_selected"> <a class="title_item_text_selected" href="#"><img src='current.gif'/>选择信息类别</a></li> <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择信息子类别</a></li> <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择区域</a></li> <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择街道</a></li> <li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>填写信息</a></li> </ul> </div> <div id='content'> <div class='tb'> <!--下面的链接可以动态改变第二页的内容; 当点击房产的时候,动态的改变第二页的内容为房产相关的; 当点击汽车的时候,动态设置第二页内容为汽车相关--> <!--里面用到了后面定义的javascript函数 setContent(content, page)--> <!--特别需要注意的是双引号里面套着单引号,单引号里面又套着双引号,要注意用反斜杠转意--> <a href="javascript: setContent('<a href=\'javascript:go(2);\'>租房</a><br><a href=\'javascript:go(2);\'>二手</a><br><a href=\'javascript:go(0);\'>返回</a><br>', 1); go(1)">房产</a><br> <a href="javascript: setContent('<a href=\'javascript:go(2);\'>家用车</a><br><a href=\'javascript:go(2);\'>商务车</a><br><a href=\'javascript:go(0);\'>返回</a><br>', 1); go(1)">汽车</a><br> </div> <div class='tb'><a href="javascript: go(2);">租房</a><br>二手<br><a href="javascript: go(0);">返回</a> </div> <div class='tb'><a href="javascript: go(3);">浦东</a><br>浦西<br><a href="javascript: go(1);">返回</a> </div> <div class='tb'><a href="javascript: go(4);">张江高科</a><br>陆家嘴<br><a href="javascript: go(2);">返回</a> </div> <div class='tb'> 姓名:<input type="text" /></br> 年龄:<input type="text" /></br> 户籍:<input type="text" /></br> <a href="javascript: alert('your form will be submitted.');">提交</a> <a href="javascript: go(3);">返回</a> </div> </div> <div id='foot'></div> </div> <script> //与定义的三个向导指示图标 //被选中的选项卡图标 var IMAGE_CURRENT = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/current.gif'; //未选中的选项卡图标 var IMAGE_CANT = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/cant.gif'; //已经做好选择了的选项卡图标 var IMAGE_OK = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/ok.gif'; function $(id){return document.getElementById(id)}; var container = $('myUL'); var items = container.getElementsByTagName('li'); var links = container.getElementsByTagName('a'); var contents = $('content').getElementsByTagName('div'); var imgs = container.getElementsByTagName('img'); //最主要的函数,参数page是要到达的页面。从0开始。 function go(page){ if(page<0 || page>4){ alert('invalid argument'); return; } for(var i=0; i<5; i++){ if(i==page){ items[i].className = 'title_item_selected'; links[i].className = 'title_item_text_selected' contents[i].style.display = ''; links[i].style.cursor = 'default'; links[i].onclick = null; imgs[i].src = IMAGE_CURRENT; } else{ items[i].className = 'title_item'; links[i].className = 'title_item_text'; contents[i].style.display = 'none'; if(i<page){ links[i].onclick = function(){ var n = getPageIndex(this); go(n); } links[i].style.cursor = 'hand'; imgs[i].src = IMAGE_OK; } else if(i>page){ links[i].onclick = null; links[i].style.cursor = 'default'; imgs[i].src = IMAGE_CANT; } } } //currentPage = page; } //辅助函数 得到被点击的选项卡的索引 function getPageIndex(node){ for(var i=0; i<5; i++){ if(node==links[i]){ return i; } } } /** * 设置指定的选项卡的内容 * content是html字符串 * page是选项卡索引 0 <= page <= 4 ; * 比如:设置第二页的内容为:<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a> * 则这样调用即可: setContent("<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a>", 1); **/ function setContent(content, page){ if(page<0 || page>4){ alert('invalid arguments'); return; } contents[page].innerHTML = content; } //初始化,显示第一页 go(0); </script> </body></html> 下面的这些代码是哪方面的知识? 求解释 jquery使用POST方法返回的数据很乱 TAB菜单和内容过多导致切换CPU占用过高..谁能优化下代码? 在IE8中怎样用js选中select中的某一项 还是 缺少对象 的问题 急。。。 请问一下我的浏览器不能显示滚动图片是为什么 javascript中如何获取表格中的当前行号 如何使用JS清除所有span上的hover类,然后给当前this的span添加hover类就行了 HTC有难度 这样的格式呢怎样判断? 急急急,超级急,请各位大虾帮忙,谢谢谢谢 js 如何阻止事件冒泡。
<html>
<head>
<title>感激网</title>
<style>
body{
font-size: 10pt;
}
#c{
border: solid red 0px;
background-color: #E4F0F8;
height: 250px;
width: 1000px;
padding-top: 5px;
}
#title{
height: 28px;
width: 100%;
border: solid blue 0px;
}
#title ul{
margin: 0px 0px 0 0;
list-style: none;
height: 100%;
}
.title_item_selected{
display: block;
float: left;
height: 100%;
margin: 0 10 0 0;
padding: 0;
background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;
}
.title_item{
display: block;
float: left;
height: 100%;
margin: 0 10 0 0;
padding: 0;
/*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat 0 -245px;*/
}
.title_item_text_selected{
border: solid red 0px;
float: left;
text-decoration:none;
margin:0 0 0 6px;
padding:10 6 0 0px;
display: block;
height: 100%;
background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;
cursor: default;
}
.title_item_text{
border: solid red 0px;
float: left;
text-decoration:none;
margin:0 0 0 6px;
padding:10 6 0 0px;
display: block;
height: 100%;
line-height: 20px;
/*background:url(http://bj.ganji.com/images/img_offset.gif) no-repeat right -245px;*/
cursor: default;
}
#content{
height: auto;
width: 100%;
border: solid blue 0px;
}
#content .tb{
margin: 0 6px 6px 6px;
padding: 5px;
border: solid red 0px;
background-color: #fff;
height: 100%;
width: 100%;
}
#foot{
height: 40px;
width: 100%;
border: solid blue 0px;
}
img{
border: none;
}
</style>
</head>
<body onload="">
author: <a href="http://blog.csdn.net/sunxing007">blog.csdn.net/sunxing007</a> <br><br>
<div id='c'>
<div id='title'>
<ul id='myUL'>
<li style="margin-left: 3px;" class="title_item_selected">
<a class="title_item_text_selected" href="#"><img src='current.gif'/>选择信息类别</a></li>
<li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择信息子类别</a></li>
<li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择区域</a></li>
<li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>选择街道</a></li>
<li class="title_item"><a class="title_item_text" href="#"><img src='cant.gif'/>填写信息</a></li>
</ul>
</div>
<div id='content'>
<div class='tb'>
<!--下面的链接可以动态改变第二页的内容;
当点击房产的时候,动态的改变第二页的内容为房产相关的;
当点击汽车的时候,动态设置第二页内容为汽车相关-->
<!--里面用到了后面定义的javascript函数 setContent(content, page)-->
<!--特别需要注意的是双引号里面套着单引号,单引号里面又套着双引号,要注意用反斜杠转意-->
<a href="javascript: setContent('<a href=\'javascript:go(2);\'>租房</a><br><a href=\'javascript:go(2);\'>二手</a><br><a href=\'javascript:go(0);\'>返回</a><br>', 1); go(1)">房产</a><br>
<a href="javascript: setContent('<a href=\'javascript:go(2);\'>家用车</a><br><a href=\'javascript:go(2);\'>商务车</a><br><a href=\'javascript:go(0);\'>返回</a><br>', 1); go(1)">汽车</a><br>
</div>
<div class='tb'><a href="javascript: go(2);">租房</a><br>二手<br><a href="javascript: go(0);">返回</a> </div>
<div class='tb'><a href="javascript: go(3);">浦东</a><br>浦西<br><a href="javascript: go(1);">返回</a> </div>
<div class='tb'><a href="javascript: go(4);">张江高科</a><br>陆家嘴<br><a href="javascript: go(2);">返回</a> </div>
<div class='tb'>
姓名:<input type="text" /></br>
年龄:<input type="text" /></br>
户籍:<input type="text" /></br>
<a href="javascript: alert('your form will be submitted.');">提交</a>
<a href="javascript: go(3);">返回</a>
</div>
</div>
<div id='foot'></div>
</div>
<script>
//与定义的三个向导指示图标
//被选中的选项卡图标
var IMAGE_CURRENT = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/current.gif';
//未选中的选项卡图标
var IMAGE_CANT = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/cant.gif';
//已经做好选择了的选项卡图标
var IMAGE_OK = 'http://p.blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090929/ok.gif';
function $(id){return document.getElementById(id)};
var container = $('myUL');
var items = container.getElementsByTagName('li');
var links = container.getElementsByTagName('a');
var contents = $('content').getElementsByTagName('div');
var imgs = container.getElementsByTagName('img');
//最主要的函数,参数page是要到达的页面。从0开始。
function go(page){
if(page<0 || page>4){
alert('invalid argument');
return;
}
for(var i=0; i<5; i++){
if(i==page){
items[i].className = 'title_item_selected';
links[i].className = 'title_item_text_selected'
contents[i].style.display = '';
links[i].style.cursor = 'default';
links[i].onclick = null;
imgs[i].src = IMAGE_CURRENT;
}
else{
items[i].className = 'title_item';
links[i].className = 'title_item_text';
contents[i].style.display = 'none';
if(i<page){
links[i].onclick = function(){
var n = getPageIndex(this);
go(n);
}
links[i].style.cursor = 'hand';
imgs[i].src = IMAGE_OK;
}
else if(i>page){
links[i].onclick = null;
links[i].style.cursor = 'default';
imgs[i].src = IMAGE_CANT;
}
}
}
//currentPage = page;
}
//辅助函数 得到被点击的选项卡的索引
function getPageIndex(node){
for(var i=0; i<5; i++){
if(node==links[i]){
return i;
}
}
}
/**
* 设置指定的选项卡的内容
* content是html字符串
* page是选项卡索引 0 <= page <= 4 ;
* 比如:设置第二页的内容为:<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a>
* 则这样调用即可: setContent("<a href='go(2);'>家用车</a><br><a href='go(2);'>商务车</a>", 1);
**/
function setContent(content, page){
if(page<0 || page>4){
alert('invalid arguments');
return;
}
contents[page].innerHTML = content;
}
//初始化,显示第一页
go(0);
</script>
</body>
</html>