如何仅将Parent ul设置为活动而不是将所有链接设置为特定页面

时间:2014-07-28 17:04:47

标签: jquery asp.net vb.net

以下是设置活动链接的脚本。从附带的图像中可以看出,当您单击联系人时,链接到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>

0 个答案:

没有答案