javascript - リンクボタンクリックでアクティブなCssClassを実装するにはどうすればよいですか

Question

リンクボタンのクリックごとに、イベントが処理されます リンクボタンのクリック時に cssClass を変更するにはどうすればよいですか? ボタンをクリックするたびにページが更新されることに注意してください。

現在、任意の LinkBut​​ton をクリックすると、デフォルトで cssClass が Plus LinkBut​​ton に設定されます

---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 とページの body タグに割り当てられた 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;}

したがって、「india-page」のボディ ID を持つすべてのページで、インドのリンクが強調表示されます。

「ホームページ」のボディ ID を持つすべてのページでは、ホーム リンクが強調表示されます。

Answer 2

AspNetを使用しているため。サーバーからの旅行ごとに LinkBut​​ton プロパティを変更してみませんか。または、ページのリロード後に適用できる状態の一部として持ってください。

一番

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を渡すことを忘れないでください。

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