以下是设置活动链接的脚本。从附带的图像中可以看出,当您单击联系人时,链接到contact.aspx的所有链接都将设置为活动状态。我知道loc.search(href)会这样做,但我只想设置主菜单链接。 (我将使用面包屑为其他..)
[Here is the site where this is happening][1]
// ========= USAGE, put in MasterPage Header ======
// <script type="text/javascript">
// $(document).ready(function () {
// $('.menu').activeMenu();!
// });
// </script>
(function ($) {
$.fn.activeMenu = function (options) {
var defaults = {
idSwitch: 'current',
defaultSite: null,
defaultIndex: 0
},
intialize = function (id) {
var op = $.extend({}, defaults, options);
var loc = location.href;
var activeCount = 0;
$(id).find('a').each(function () {
var href = $(this).attr('href');
if (loc.search(href) != -1) {
$(this).attr('id', op.idSwitch); // ookie change this to this.parent.
activeCount++;
}
else {
$(this).attr('id', '');
}
if (activeCount == 0) {
if (loc.search(op.defaultSite) != -1) {
$(id).find('a').eq(0).attr('id', op.idSwitch);
}
}
});
}
return this.each(function () {
intialize(this);
});
}
)(jQuery);
aspx html代码
<ul class="menu" id="responsive">
<li><a href="default.aspx" id="current"><i class="halflings white home"></i> Home</a></li>
<li><a href="#"><i class="halflings white file"></i>Services</a>
<!-- Mega Menu / Start -->
<ul class="cols4">
<li class="col4">
<p>Below is a list of our services for additional information <a href="contact.aspx">contact us</a> today!!</p>
</li>
<li class="col1">
<h5>Digital Signage</h5>
<ol>
<li><a href="about-us.html">About</a></li>
<li><a href="flexslider.html">FlexSlider</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="elements.html">Elements</a></li>
</ol>
</li>
<li class="col1">
<h5>Development</h5>
<ol>
<li><a href="faq.html">FAQ's</a></li>
<li><a href="404-page.html">404 Page</a></li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
</ol>
</li>
<li class="col1">
<h5>Consulting</h5>
<p>This <a href="#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p>
</li>
<li class="col1">
<ol>
<h5>Hosting</h5>
<p>Our <a href="hosting.aspx">hosting packages</a> start from your standard packages all the way to custom cloud solutions... <a href="hosting.aspx">click here</a> to learn more</p>
</ol>
</li>
</ul>
<!-- Mega Menu / End -->
</li>
<li><a href="#"><i class="halflings white cog"></i> Shortcodes</a>
<!-- Second Level / Start -->
<ul>
<li><a href="elements.html">Elements</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
<!-- Second Level / End -->
</li>
<li><a href="#"><i class="halflings white briefcase"></i> Portfolio</a>
<!-- Second Level / Start -->
<ul>
<li><a href="portfolio-2.html">2 Columns</a></li>
<li><a href="portfolio-3.html">3 Columns</a></li>
<li><a href="portfolio-4.html">4 Columns</a></li>
<li><a href="single-project.html">Single Project</a></li>
</ul>
<!-- Second Level / End -->
</li>
<li><a href="#"><i class="halflings white shopping-cart"></i> Shop</a>
<!-- Second Level / Start -->
<ul>
<li><a href="shop.html">Shop</a></li>
<li><a href="product-page.html">Product Page</a></li>
</ul>
<!-- Second Level / End -->
</li>
<li><a href="about.aspx"><i class="halflings white user"></i> About</a>
<!-- Second Level / Start -->
<ul>
<li><a href="blog-large-image.html">Large Image</a></li>
<li><a href="blog-medium-image.html">Medium Image</a></li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
<!-- Second Level / End -->
</li>
<li><a href="contact.aspx"><i class="halflings white envelope"></i>Contact</a></li>