b]我想做个导航栏选项卡,但是切换的时候却出现了问题,点击导航栏上的栏目时,出现新的页面,重新加载了头部模板.
导致那个红框不能保持,闪一下就还原了,哪位有好点的办法.能用在导航栏上的重新刷新也不会还原.最好是<div>+<ul>+<li>做的.[/b]

解决方案 »

  1.   


    你把下面要切换的内容做成iframe,就成了~·
    点击选项卡,切换iframe的src地址
      

  2.   

    <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>
      

  3.   

    <!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>
      

  4.   

    页面加载,根据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>