想点击导航栏中的某一项后突出显示这一项,也就是说想达到方便用户辨别他进入了哪个栏目。但是我写出来的效果是,点击后样式总是一闪而过又显示回原来的样式。大大们帮忙看看到底是哪儿有问题?难道是点击后因为页面刷新了又回来原来的默认样式?我用的是母版页。小弟技术不精,请高手解答。关键代码如下:<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";
}
<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";
}
我也这样想过~问题是我还不会写这种ASP.net的后台代码~~能否实现出来看看啊~~
呵呵,不好意思,本人有点笨,问清楚点。
protected void Page_Load(object sender, EventArgs e)
{
HtmlAnchor a = this.Master.FindControl("a01") as HtmlAnchor;
a.Attributes["class"] = "ClassName";
}
<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");
}
这样就可以了。
或者自己编写一个控件, 那样会更方便一点..
<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;
}
<%@ 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>...
我来讲:
<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;
}
{
lab1.BackColor = System.Drawing.Color.FromArgb(227, 76, 127);
lab1.ForeColor = System.Drawing.Color.FromArgb(253, 230, 101);
}
页面刷新了 所以js就从新加载了 你可以传递一个值过去 根据值来判断是哪个lab标签 然后通过服务端来改变背景状态