Question

我正在为我的网站制作一个JavaScript / HTML模板，但是我无法弄清楚如何在不同ID处隐藏链接和游标。

网址的结尾如此http://domain.com/index.html#about等。主页的代码如下：

<!-- Home Page -->
    <section class="content show" id="home">
        <h1>THIS IS THE HEADER</h1>
        <h5>SUB HEADING</h5>
        <p>THIS IS A PARAGRAPH OF TEXT.</p>

    </section>

是最初显示的内容，其余使用“内容隐藏”。我遇到的问题是，当处于其他ID（例如#services）时，即使隐藏了其他页面中的内容，在导航页面时仍可显示链接和光标。一个例子是我的模板页面：

             <!-- Web Templates -->
    <section class="content hide" id="web_templates">
        <h2>HTML Stand Alone Website Templates</h2>
        <h3>Free Templates</h3>
        <!--THE IMAGES ARE PLACED IN AN UNORDERED LIST-->
        <ul class="enlarge"> <!--We give the list a class so that we can style it seperately from other unordered lists-->
        <!--First Image-->
        <li>
        <img src="images/free_web_templates/hairstylesalon.jpg" width="150px" height="100px" alt="Hair Style Salon" /> <!--thumbnail image-->
        <span> <!--span contains the popup image-->
        <img src="images/free_web_templates/hairstylesalon.jpg" alt="Hair Style Salon" /> <!--popup image-->
        <br />Hair Style Salon (Free Website Templates) <a href="#">Download</a> <!--caption appears under the popup image-->
        </span>
        </li>
        </ul>

    </section>

当不在此页面上时，即使内容被隐藏，手形光标也会显示在每个页面上。无论如何我可以解决这个问题，以便在URL中的不同ID处隐藏包含游标和链接的内容？

内容的CSS：

.content { 
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;

}

主要JS：

jQuery(document).ready(function() {

/* How to Handle Hashtags */
jQuery(window).hashchange(function(){
    var hash = location.hash;
    jQuery('a[href='+hash+']').trigger('click');
});

/* Main Navigation Clicks */
jQuery('.main-nav ul li a').click(function() {
    var link = jQuery(this).attr('href').substr(1);

    if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
        jQuery('.main-nav ul li a').removeClass('active'); //remove active
        jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
            complete: function() {
                jQuery('a[href="#'+link+'"]').addClass('active'); // add active
                jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});    
            }
        });
    }
});

}）;

Answer 1

您是否正在寻找

{display:none}使事物不可见，元素占据的空间被折叠了？

HTML / JavaScript - 如何隐藏链接和光标？

1 个答案: