Question

在每个linkButton上单击，处理事件如何在链接按钮单击时更改cssClass？请注意，每次单击按钮都会刷新页面。

目前当我点击任何LinkButton时，默认情况下它会将cssClass设置为Plus LinkButton

--- -----------的Index.aspx

<ul class="mainMenu">
<li>
    <asp:LinkButton ID="lnkHome" runat="server"><span>Home</span></asp:LinkButton>
</li>
<li>
    <asp:LinkButton ID="lnkIndia" runat="server"><span>India</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkWorld" runat="server"><span>World</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkStates" runat="server"><span>States</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkCity" runat="server"><span>City</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkBusiness" runat="server"><span>Business</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkSport" runat="server"><span>Sport</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkMagazine" runat="server"><span>Magazine</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkBlogs" runat="server"><span>Patrika Blogs</span></asp:LinkButton></li>
<li>
    <asp:LinkButton ID="lnkPlus" CssClass="active" runat="server"><span>Plus</span></asp:LinkButton></li>

CSS类

ul.mainMenu{float:right; background:url(../images/menubg.gif) 0 0 repeat-x; width:100%}
ul.mainMenu li{float:left; color:#a7b5be; font-weight:bold; background:url(../images/seprator.gif) right 0 no-repeat; position:relative; z-index:999}
ul.mainMenu li a{color:#586066;line-height:24px;display:inline-block;}
ul.mainMenu li a span{color:#576067; padding:0 11px; line-height:24px; display:inline-block; }
ul.mainMenu li a:hover{background:url(../images/hover.gif) 0 0 repeat-x}
ul.mainMenu li a:hover span{color:#fff}
ul.mainMenu li a.active{background:url(../images/hover.gif) 0 -24px repeat-x;}
ul.mainMenu li a.active span{background:url(../images/redArrow.gif) center bottom no-repeat; padding-bottom:7px; color:#fff}

VB代码

 Protected Sub lnkHome_Click(sender As Object, e As EventArgs) Handles lnkHome.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("HomePage")
    Else
        Response.Redirect("index.aspx")
    End If
End Sub

Protected Sub lnkAboutUs_Click(sender As Object, e As EventArgs) Handles lnkAboutUs.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("AboutUsRoute")
    Else
        Response.Redirect("AboutUs.aspx")
    End If
End Sub

Protected Sub lnkContactUs_Click(sender As Object, e As EventArgs) Handles lnkContactUs.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("ContactUsRoute")
    Else
        Response.Redirect("ContactUs.aspx")
    End If
End Sub

Protected Sub lnkFeedback_Click(sender As Object, e As EventArgs) Handles lnkFeedback.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("FeedbackRoute")
    Else
        Response.Redirect("Feedback.aspx")
    End If
End Sub

Protected Sub lnkSiteMap_Click(sender As Object, e As EventArgs) Handles lnkSiteMap.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("SiteMapRoute")
    Else
        Response.Redirect("Sitemap.aspx")
    End If
End Sub

Protected Sub lnkAdvWithUs_Click(ByVal sender As Object, ByVal e As EventArgs) Handles lnkAdvWithUs.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("AdvertiseWithUsRoute")
    Else
        Response.Redirect("AdvertiseWithUs.aspx")
    End If
End Sub

Protected Sub lnkPrivacyFooter_Click(sender As Object, e As EventArgs) Handles lnkPrivacyFooter.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("PrivacyRoute")
    Else
        Response.Redirect("PrivacyPolicy.aspx")
    End If
End Sub

Protected Sub lnkDisclaimerFooter_Click(sender As Object, e As EventArgs) Handles lnkDisclaimerFooter.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("DisclaimerRoute")
    Else
        Response.Redirect("Disclaimer.aspx")
    End If
End Sub

Protected Sub lnkNewsLetterFooter_Click(sender As Object, e As EventArgs) Handles lnkNewsLetterFooter.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("NewsLetterRoute")
    Else
        Response.Redirect("NewsLetters.aspx")
    End If
End Sub

Protected Sub lnkWorkWithUs_Click(sender As Object, e As EventArgs) Handles lnkWorkWithUs.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("WorkWithUsRoute")
    Else
        Response.Redirect("WorkWithUs.aspx")
    End If
End Sub

Protected Sub lnkIndia_Click(sender As Object, e As EventArgs) Handles lnkIndia.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("CategoryRoute", New With {
                                                            .CatName = "India"
                                                            })
    Else
        Response.Redirect("Category.aspx?CatName=India")
    End If
End Sub

Protected Sub lnkWorld_Click(sender As Object, e As EventArgs) Handles lnkWorld.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("CategoryRoute", New With {
                                                            .CatName = "World"
                                                            })
    Else
        Response.Redirect("Category.aspx?CatName=World")
    End If
End Sub

Protected Sub lnkStates_Click(sender As Object, e As EventArgs) Handles lnkStates.Click

End Sub

Protected Sub lnkBusiness_Click(sender As Object, e As EventArgs) Handles lnkBusiness.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("CategoryRoute", New With {
                                                            .CatName = "Business"
                                                            })
    Else
        Response.Redirect("Category.aspx?CatName=Business")
    End If
End Sub

Protected Sub lnkSport_Click(sender As Object, e As EventArgs) Handles lnkSport.Click
    If (ConfigurationManager.AppSettings("SeoFriendlyUrl") = "true") Then
        Response.RedirectToRoute("CategoryRoute", New With {
                                                            .CatName = "Sports"
                                                            })
    Else
        Response.Redirect("Category.aspx?CatName=Sports")
    End If
End Sub

Answer 1

最好的方法是使用链接按钮的ID和分配给页面正文标记的ID的组合。

让我们以印度链接为例。您的HTML标记看起来像这样：

<body id="india-page">
<ul class="mainMenu">
<li>
    <asp:LinkButton ID="lnkHome" runat="server"><span>Home</span></asp:LinkButton>
</li>
<li>
    <asp:LinkButton ID="lnkIndia" runat="server"><span>India</span></asp:LinkButton></li>
<li>
</ul>

然后，您的CSS样式表看起来像这样。

#home-page ul.mainMenu li a#lnkHome {background:url(../images/hover.gif) 0 -24px repeat-x;}
#india-page ul.mainMenu li a#lnkIndia {background:url(../images/hover.gif) 0 -24px repeat-x;}

因此，身体ID为'india-page'的每个页面都会突出显示India链接

身体ID为“主页”的每个页面都会突出显示主页链接

Answer 2

因为您使用的是AspNet。为什么不从服务器修改每次旅行的LinkButton属性。或者将其作为状态的一部分，您可以在页面重新加载后应用。

最佳

Answer 3

点击链接按钮调用jquery函数如下：

    <script type="text/javascript">
     $(document).ready(function () {
        $(".lnkIndia").click(function () {

            $(".lnkIndia").addClass("Name of css class");
         }

     });
    </script>

在您的页面上添加以上脚本，但这是针对特定的链接按钮，即“lnkIndia”，其他您需要添加相同的脚本并更改按钮

对于常用功能，您可以使用以下代码：

  <script type="text/javascript">
   function AddClass(IdOfLinkButton)
   { 
        document.getElementById(IdOfLinkButton).style.backcolor='red';
        document.getElementById(IdOfLinkButton).style.baorder='1px solid red';
   }
  </script>

并点击链接按钮调用此javascript函数，如下所示也不要忘记将链接按钮的id传递给您调用functin的函数。

<asp:LinkButton ID="lnkIndia" runat="server" OnClientClick="javscript:AddClass('lnkIndia');">

我们如何在链接Button Click上实现CssClass活动

CSS类

VB代码

3 个答案: