javascript - 我们如何在链接按钮单击上实现 CssClass 活动

Question

在每个链接按钮单击时，都会处理事件我们如何在链接按钮单击时更改 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

score 1 · Accepted Answer

最好的方法是结合使用链接按钮的 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;}

因此，body id 为“india-page”的每个页面都会突出显示 India 链接

每个正文 id 为“主页”的页面都会突出显示主页链接等

score 0 · Accepted Answer

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

最好的

score -1 · Accepted Answer

点击链接按钮调用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 传递给您正在调用函数的函数。

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

javascript - 我们如何在链接按钮单击上实现 CssClass 活动

CSS 类

VB代码

3 回答 3

Related

Reference