想点击导航栏中的某一项后突出显示这一项,也就是说想达到方便用户辨别他进入了哪个栏目。但是我写出来的效果是,点击后样式总是一闪而过又显示回原来的样式。大大们帮忙看看到底是哪儿有问题?难道是点击后因为页面刷新了又回来原来的默认样式?我用的是母版页。小弟技术不精,请高手解答。关键代码如下:<ul>
                <li><a class="head_a" href="/page/ziyuan.aspx"  onfocus="flase" onclick="a_click(this)">地下水资源</a></li>
                <li><a class="head_a" href="/page/huanjing.aspx" onfocus="flase" onclick="a_click(this)">地下水环境</a></li>
                <li><a class="head_a" href="/page/wangluo.aspx" onfocus="flase" onclick="a_click(this)">检测网络</a></li>
                <li><a class="head_a" href="/page/shuiqing.aspx" onfocus="flase" onclick="a_click(this)">水情预报</a></li>
            </ul>
.head_a
{
color:#4193CA; 
text-decoration:none;
padding: 5px 6px 5px 50px;
}.head_a:hover
{
color:#FFF; 
background-color:#4193CA;
}.click_a
{
color:#FFF;
text-decoration:none;
background-color:#E33961;
padding: 5px 6px 5px 50px;
}
function a_click(a_obj){
    a_obj.className="click_a"; 
}

解决方案 »

  1.   

    页面都刷新了,还能不变回来么...楼主思路错了,应该由 /page/ 目录里的页面的服务器端代码来控制
      

  2.   

    我的做法是判断URL路径是否包含导航中的的连接指向的网页的上级路径相同...相同就response.write 选中的样式..
      

  3.   

    可以把超链接做成html服务器控件,在后台控制。
      

  4.   


    我也这样想过~问题是我还不会写这种ASP.net的后台代码~~能否实现出来看看啊~~
      

  5.   

    大大些,你们能不能别几句话就把我打发了。小弟学艺不精。初入ASP.NET,能不能详细点。并且写下实现代码。我懂意思。但无从下手啊~~~
      

  6.   

    <a id="a1" class="head_a" href="/page/huanjing.aspx" runat="server">地下水环境</a>后台用:a1.Attributes.Add("onclick","js方法名");
      

  7.   

    更正一下,用:a1.Class="click_a";
      

  8.   

    你的意思是在 huanjing.aspx 页面下的 huanjing.aspx.cs 里面的 Page_Load 方法里面写 a1.Attributes.Add("onclick","js方法名");这个方法么?
    呵呵,不好意思,本人有点笨,问清楚点。
      

  9.   

    一个比较简单的方法,加上runat属性让锚标签变成服务器控件<a runat="server" id="a01" >在page的代码内这样使用
            protected void Page_Load(object sender, EventArgs e)
            {
                HtmlAnchor a = this.Master.FindControl("a01") as HtmlAnchor;
                a.Attributes["class"] = "ClassName";
            }
      

  10.   

    你这样,在前台文件中:
    <a id="a1" class="head_a" href="/page/ziyuan.aspx" runat="server" onserverclick="a1_Click">地下水资源</a>
    后台cs文件中:
    protected void a1_Click(object sender, EventArgs e)
    {
    a1.Attributes.Add("class", "click_a");
    }
    这样就可以了。
      

  11.   

    asp.net 有个 Menu 控件 (没用过,不会用)
    或者自己编写一个控件, 那样会更方便一点..
      

  12.   

    貌似触发不了这个a1_Click事件~~~~
      

  13.   


    <ul>
                    <li><a class="head_a"   onfocus="flase" onclick="a_click(this)">地下水资源</a></li>
                    <li><a class="head_a"  onfocus="flase" onclick="a_click(this)">地下水环境</a></li>
                    <li><a class="head_a"  onfocus="flase" onclick="a_click(this)">检测网络</a></li>
                    <li><a class="head_a"  onfocus="flase" onclick="a_click(this)">水情预报</a></li>
                </ul>
    <ul>
    <li><Iframe id="frm"></Iframe><li>
    </ul>function a_click(obj){
     var f = document.getElementById("frm");
     var url = "";
      switch(obj.innerText){
        case "地下水资源":
         url  = "/page/ziyuan.aspx";
        break;
        case "地下水环境":
         url  = "/page/huanjing.aspx";
        break;
        case "检测网络":
         url  = "/page/wangluo.aspx";
        break;
       case "水情预报":
         url  = "/page/shuiqing.aspx";
        break;
       }
    f.src = url;
    }
      

  14.   

    MasterPage.master
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %><!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 runat="server">
        <title></title>
        <style type="text/css">
            .head_a
            {
                color: #4193CA;
                text-decoration: none;
                padding: 5px 6px 5px 50px;
            }
            
            .head_a:hover
            {
                color: #FFF;
                background-color: #4193CA;
            }
            
            .click_a
            {
                color: #FFF;
                text-decoration: none;
                background-color: #E33961;
                padding: 5px 6px 5px 50px;
            }
        </style>
        <script type="text/javascript">
            function GetMenu(id) {
                for (var i = 1; i <= 4; i++) {
                    var item = document.getElementById("lihead_" + i);
                    item.className = "head_a";
                }
                var currentNav = document.getElementById("lihead_" + id);
                currentNav.className = "click_a";
            }
        </script>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ul id="ulhead">
                <li id="lihead_1"><a class="head_a" href="/page/ziyuan.aspx">地下水资源</a></li>
                <li id="lihead_2"><a class="head_a" href="/page/huanjing.aspx">地下水环境</a></li>
                <li id="lihead_3"><a class="head_a" href="/page/wangluo.aspx">检测网络</a></li>
                <li id="lihead_4"><a class="head_a" href="/page/shuiqing.aspx">水情预报</a></li>
            </ul>        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            
            </asp:ContentPlaceHolder>
        </div>
        </form></body>
    </html>ziyuan.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ziyuan.aspx.cs" Inherits="page_ziyuan" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        window.onload = function () {
            GetMenu(1);
        }
    </script>
    </asp:Content>huanjing.aspx
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ziyuan.aspx.cs" Inherits="page_ziyuan" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        window.onload = function () {
            GetMenu(2);
        }
    </script>
    </asp:Content>...
      

  15.   


    我来讲:
    <li><a class="head_a"   onfocus="flase" onclick="a_click(this)">地下水资源</a></li>
    function a_click(obj){//这个就是响应点击onclick的这个函数意思就是不论你点击哪一个东西
    //function a_click里面进行判断    根据点击不同跳转到不同的地方这是javascript的做法
     var f = document.getElementById("frm");
     var url = "";
      switch(obj.innerText){
        case "地下水资源":
         url  = "/page/ziyuan.aspx";
        break;
        case "地下水环境":
         url  = "/page/huanjing.aspx";
        break;
        case "检测网络":
         url  = "/page/wangluo.aspx";
        break;
       case "水情预报":
         url  = "/page/shuiqing.aspx";
        break;
       }
    f.src = url;
    }
      

  16.   

    24楼也不错。 基本思路就是给各个项一个ID,然后点击后取ID值,刷新后可以循环判断,恢复按钮背景。
      

  17.   

     <li><a class="head_a" href="/page/ziyuan.aspx?sid=1"  onfocus="flase" onclick="a_click(this)"> <asp:Label id="lab1" text='地下水资源' ></asp:Label></a></li>if (!string.IsNullOrEmpty(Request.QueryString["sid"]))
    {
        lab1.BackColor = System.Drawing.Color.FromArgb(227, 76, 127);
        lab1.ForeColor = System.Drawing.Color.FromArgb(253, 230, 101);
    }
    页面刷新了 所以js就从新加载了  你可以传递一个值过去 根据值来判断是哪个lab标签  然后通过服务端来改变背景状态