Question

我在asp页面中有几个链接，所有链接都有受人尊敬的CSS。第一个链接在主页上突出显示不同的CSS。我想在Click事件上切换CSS类，每当我分别按下第二个或第三个链接时它应该突出显示，而其他一个变为普通的普通CSS。

<ul>
    <li><a href="../Admin/Home.aspx" id="a_Home" class="homeactive" onclick="ChangeSelectedMenuCss(this.id);">
        Home</a></li>
    <li><a href="../Admin/subadmindetails.aspx" id="a_Report" class="home" onclick="ChangeSelectedMenuCss(this.id);">
        SubAdmin</a></li>
    <li><a href="../Admin/control_panel.aspx" id="a_User" class="home" onclick="ChangeSelectedMenuCss(this.id);">
        Control Panel</a></li>
    <li><a href="../Admin/admin_master.aspx" id="a_CntrlPnl" class="home" onclick="ChangeSelectedMenuCss(this.id);">
        Master Data</a></li>
    <li><a href="../Admin/Login.aspx" class="home">Logout</a></li>
</ul>

请帮助我，我被困了 Thanx和问候。

Answer 1

我认为你混淆了ASP.NET和Javascript之间的互动方式。当用户单击其中一个链接时，onclick事件将触发，但ASP.NET将加载与该链接相关的页面，从而重置导航菜单。

您可能想要做的而不是使用onclick事件是在主页面上有一个类来标识它所在的页面，然后将homeactive类添加到它需要的任何链接上。< / p>

Answer 2

为了使用javascript更改类，您可以执行以下操作：

function ChangeSelectedMenuCss(id){
    document.getElementByClassName('homeactive').className ="home";
    document.getElementById(id).className = "homeactive";
}

Answer 3

如果您使用JQuery，那么此代码可能对您有用。

首先喜欢这段代码 -

$(function() {
    var links = $('a.link').click(function() {
    links.removeClass('active');
    $(this).addClass('active');
    });
});

然后在你的CSS文件中，添加tis类 -

a, a:visited { color:black }
a.link.active { color:blue; }

它可能会帮助你...... 或者你可以看到这个小提琴 - http://jsfiddle.net/gHb9F/

在点击事件上更改Css

3 个答案: