如何使一个菜单链接使用javascript/jQuery活动？

我有一个共同的头文件中的静态菜单。无论何时通过点击菜单中的链接访问任何页面，我都需要将该点击链接上的图像作为激活链接的指示符。如何使一个菜单链接使用javascript/jQuery活动？

下面

是菜单的HTML我使用

<ul id="in-menu"> 
    <li><a href="unleashing-your-heart" >home</a></li> 
    <li><a href="fromdaniella" >from Daniella</a></li> 
    <li><a href="material-list" >material list</a></li> 
    <li><a href="program" >program</a></li> 
    <li><a href="testimonials-2" >testimonials</a></li> 
    <li><a href="#">login</a></li> 
</ul>

如何使用jQuery或JavaScript，使所需的功能工作？

来源

2011-06-09 OM The Eternity

你并不需要使用Javascript/jQuery的这个

你可以做的就是给每个页面的<body>元素或主容器div一个唯一的ID或类近的HTML的顶部某处结构无论如何..然后给你的菜单中的每个链接一个唯一的ID或类（如果使用类，他们可以是相同的第一个）

<body class="nm-unl"> 
    <ul id="in-menu"> 
    <li class="nm-unl"><a href="unleashing-your-heart" >home</a></li> 
    <li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li> 
    <li class="nm-mat"><a href="material-list" >material list</a></li> 
    <li class="nm-pro"><a href="program" >program</a></li> 
    <li class="nm-tes"><a href="testimonials-2" >testimonials</a></li> 
    <li class="nm-log"><a href="#">login</a></li> 
    </ul> 
</body>

所以，你的主页上body类可能是nm-unl和登录页面将有nm-logbody类等。菜单本身永远不会改变，因此仍然可以在一个共同文件

然后在每一个环节都进行专门针对CSS的..所以说，你的普通链接没有图像，但:hover和你的“当前”的网页做

#in-menu a {background: none;} 

#in-menu a:hover {background: url(image.png) no-repeat top center;}

，那么你会组新的/特定的选择器进入悬停规则选择器，那些规则则比普通的规则更具体，并且它们也将只适用于你的“当前页面链接”，即当两个页面在页面上相同时

.nm-log #in-menu .nm-log a, 
.nm-tes #in-menu .nm-tes a, 
.nm-pro #in-menu .nm-pro a, 
.nm-mat #in-menu .nm-mat a, 
.nm-dan #in-menu .nm-dan a, 
.nm-unl #in-menu .nm-unl a, 
#in-menu a:hover {background: url(image.png) no-repeat top center;}

你仍然需要#in-menu ID的选择以及两个班，因为否则的选择将不会有足够的重量，以覆盖默认规则

一个jQuery的解决方案会以类似的方式工作，逻辑将是相同的。您仍然需要一个唯一的页面指示符，即一个主体类或ID，然后您将检查主体ID /类并将当前类添加到相关的匹配链接。

来源

2011-06-09 07:21:20 clairesuzy

这是一个基于jQuery的解决方案：

1）确定每一页一些如何

2）比赛反对您的菜单项ID

3）更改CSS相应

<script> 
    pageID = $('#pageID').val(); 
    $("li").each(function(index) { 
     listItemText = $(this).html(); 
     listItemText = listItemText.toLowerCase(); 

     if(listItemText == pageID) 
      { 
       $(this).css('color','red'); 
      } 
    }); 
</script> 

<style> 
    li{ 
     color:green; 
    } 
</style> 

<input type="hidden" id="pageID" value="contact" /> 

<ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Portfolio</li> 
    <li>Contact</li> 
</ul>

http://jsfiddle.net/CnEsF/

有很多做每一个这些步骤的方式，因此我的答案的风格。每一步都可以不同的方式执行。如果页面可能涉及使用隐藏的输入或其他DOM元素，或者解析URL。匹配会要求你标准化你的脚本，这样你的条件不会失败......我使用了小写方法，但还有其他方法。最后，可以通过分配一个已经具有样式的新类，使用jquery修改DOM，甚至在使用PHP构建页面时分配正确的类来完成更改CSS。

希望这可以帮助

来源

2013-01-16 20:45:10 illathruz

如何使一个菜单链接使用javascript/jQuery活动？

回答

相关问题