导航栏切换选项卡问题 b]我想做个导航栏选项卡,但是切换的时候却出现了问题,点击导航栏上的栏目时,出现新的页面,重新加载了头部模板.导致那个红框不能保持,闪一下就还原了,哪位有好点的办法.能用在导航栏上的重新刷新也不会还原.最好是<div>+<ul>+<li>做的.[/b] 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你把下面要切换的内容做成iframe,就成了~·点击选项卡,切换iframe的src地址 <div id="nav"><ul id="com"> <li class="li_1"><a class="home" href="#">首页</a></li> <li class="li_2"><a href="#">新闻中心</a></li> <li class="li_3"><a href="#">商务中心</a></li> <li class="li_4"><a href="#">买产品</a></li> <li class="li_5"><a href="#">卖产品</a></li> <li class="li_6"><a href="#">找商户</a></li> <li class="li_7"><a href="#">价格指数</a></li> <li class="li_8"><a href="$#">市场介绍</a></li></ul></div> <!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>*{margin:0; padding:0;}ul{list-style:none;}li{float:left; width:100px; margin-right:20px; display:inline;}li a{width:100px; display:block; background:#F00; text-align:center;}</style></head><body><div id="nav"><ul id="com"><li class="li_1"><a class="home" href="#">首页</a></li><li class="li_2"><a href="#">新闻中心</a></li><li class="li_3"><a href="#">商务中心</a></li><li class="li_4"><a href="#">买产品</a></li><li class="li_5"><a href="#">卖产品</a></li><li class="li_6"><a href="#">找商户</a></li><li class="li_7"><a href="#">价格指数</a></li><li class="li_8"><a href="$#">市场介绍</a></li></ul></div><div style=" clear:both;"></div><div id="box"><div style="display:none;">首页</div><div style="display:none;">新闻中心</div><div style="display:none;">商务中心</div><div style="display:none;">买产品</div><div style="display:none;">卖产品</div><div style="display:none;">找商户</div><div style="display:none;">价格指数</div><div style="display:none;">市场介绍</div></div><script> var a = document.getElementById('nav').getElementsByTagName('a'), len = a.length, divs = document.getElementById('box').getElementsByTagName('div'); for(var i = 0; i < len; i++){ !function(i){ a[i].onclick = function(){ for(var j = 0; j < len; j++){a[j].style.background = '#F00';divs[j].style.display = 'none';} this.style.background = '#393'; divs[i].style.display = 'block'; }; }(i); }</script></body></html> 页面加载,根据url 来判断是哪个菜单,设置样式一个例子:<div class="header"> <div style=" float:left; height:100%; width:400px;"><%-- background-image:url('images/master_bg.jpg')--%> </div> <div style=" float:right; text-align:right; height:30px;line-height:30px; margin:70px 30px 5px auto"> <a href="/" >切换到前台</a> | <a href="#" onclick="if(confirm('你真的要退出系统吗?')){document.location.href='/Manager/Logon.aspx?out=true';}" >退出</a> </div> </div> <div class="conetent"> <div class="sidebar" id="div_Sidebar"> <div class="item" > <h6>用户管理</h6> <ul> <li><a href="/Manager/User/UserList.aspx">用户列表</a></li> <li><a href="/Manager/User/AddUser.aspx">添加用户</a></li> <li><a href="/Manager/User/UpdatePassword.aspx">修改密码</a></li> <li><a href="/Manager/User/Safety.aspx">设置密码保护</a></li> <li><a href="javascript:;" onclick="if(confirm('你真的要退出系统吗?')){document.location.href='/Manager/Logon.aspx?out=true';}" >安全退出</a></li> </ul> </div> <div class="item" > <h6>公司管理</h6> <ul> <li><a href="/Manager/Company/CompanyList.aspx">公司列表</a></li> </ul> </div> </div> <div class="conetent_center"> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> </div></body><script type='text/javascript'> (function(){ var div_Sidebar = $('div_Sidebar'); var menuList = div_Sidebar.getElementsByTagName('a'); var url = document.location.href; var hrefUrl = ''; if(menuList==null || typeof(menuList)=='undefined') { return;} var index=0; for(;index < menuList.length;index++) { hrefUrl = menuList[index].href; hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1); if(hrefUrl!='' && hrefUrl != '/') { if(url.indexOf(hrefUrl) > 0 ) { break; } } } if(index < menuList.length) { menuList[index].id = 'a_Checked'; // 我用的ID选择器 } })(); </script> 求一段网页横向打印的HTML代码 用正则查找字符串 初学javaScript疑问 请问怎么在Combobox里面控制下拉高度 一个js变量的问题 一段小程序的不解 如何在页面载入完成和判断下拉菜单后再执行JS? 如何控制页面选择项的比例? 如何用JavaScript制作关联下拉选择框 jquery设置c:foreach标签的items属性值 fck:editor如何进行非空验证!!! 如何计算一个元素距离body顶部的距离
你把下面要切换的内容做成iframe,就成了~·
点击选项卡,切换iframe的src地址
<ul id="com">
<li class="li_1"><a class="home" href="#">首页</a></li>
<li class="li_2"><a href="#">新闻中心</a></li>
<li class="li_3"><a href="#">商务中心</a></li>
<li class="li_4"><a href="#">买产品</a></li>
<li class="li_5"><a href="#">卖产品</a></li>
<li class="li_6"><a href="#">找商户</a></li>
<li class="li_7"><a href="#">价格指数</a></li>
<li class="li_8"><a href="$#">市场介绍</a></li>
</ul>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
li{float:left; width:100px; margin-right:20px; display:inline;}
li a{width:100px; display:block; background:#F00; text-align:center;}
</style>
</head><body>
<div id="nav">
<ul id="com">
<li class="li_1"><a class="home" href="#">首页</a></li>
<li class="li_2"><a href="#">新闻中心</a></li>
<li class="li_3"><a href="#">商务中心</a></li>
<li class="li_4"><a href="#">买产品</a></li>
<li class="li_5"><a href="#">卖产品</a></li>
<li class="li_6"><a href="#">找商户</a></li>
<li class="li_7"><a href="#">价格指数</a></li>
<li class="li_8"><a href="$#">市场介绍</a></li>
</ul>
</div>
<div style=" clear:both;"></div>
<div id="box">
<div style="display:none;">首页</div>
<div style="display:none;">新闻中心</div>
<div style="display:none;">商务中心</div>
<div style="display:none;">买产品</div>
<div style="display:none;">卖产品</div>
<div style="display:none;">找商户</div>
<div style="display:none;">价格指数</div>
<div style="display:none;">市场介绍</div>
</div>
<script>
var a = document.getElementById('nav').getElementsByTagName('a'),
len = a.length,
divs = document.getElementById('box').getElementsByTagName('div');
for(var i = 0; i < len; i++){
!function(i){
a[i].onclick = function(){
for(var j = 0; j < len; j++){a[j].style.background = '#F00';divs[j].style.display = 'none';}
this.style.background = '#393';
divs[i].style.display = 'block';
};
}(i);
}
</script>
</body>
</html>
<div class="header">
<div style=" float:left; height:100%; width:400px;"><%-- background-image:url('images/master_bg.jpg')--%>
</div>
<div style=" float:right; text-align:right; height:30px;line-height:30px; margin:70px 30px 5px auto">
<a href="/" >切换到前台</a> |
<a href="#" onclick="if(confirm('你真的要退出系统吗?')){document.location.href='/Manager/Logon.aspx?out=true';}" >退出</a>
</div>
</div>
<div class="conetent">
<div class="sidebar" id="div_Sidebar">
<div class="item" >
<h6>用户管理</h6>
<ul>
<li><a href="/Manager/User/UserList.aspx">用户列表</a></li>
<li><a href="/Manager/User/AddUser.aspx">添加用户</a></li>
<li><a href="/Manager/User/UpdatePassword.aspx">修改密码</a></li>
<li><a href="/Manager/User/Safety.aspx">设置密码保护</a></li>
<li><a href="javascript:;" onclick="if(confirm('你真的要退出系统吗?')){document.location.href='/Manager/Logon.aspx?out=true';}" >安全退出</a></li>
</ul>
</div>
<div class="item" >
<h6>公司管理</h6>
<ul>
<li><a href="/Manager/Company/CompanyList.aspx">公司列表</a></li>
</ul>
</div>
</div>
<div class="conetent_center">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</div></body>
<script type='text/javascript'>
(function(){
var div_Sidebar = $('div_Sidebar');
var menuList = div_Sidebar.getElementsByTagName('a');
var url = document.location.href;
var hrefUrl = '';
if(menuList==null || typeof(menuList)=='undefined')
{ return;}
var index=0;
for(;index < menuList.length;index++)
{
hrefUrl = menuList[index].href;
hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
if(hrefUrl!='' && hrefUrl != '/')
{
if(url.indexOf(hrefUrl) > 0 )
{
break;
}
}
}
if(index < menuList.length)
{
menuList[index].id = 'a_Checked'; // 我用的ID选择器
}
})();
</script>