【发布时间】：2013-12-23 15:40:35
【问题描述】：
我正在为我的网站制作一个 JavaScript/HTML 模板，但是我无法弄清楚如何在不同 ID 下隐藏链接和光标。
URL 的结尾像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});
}
});
}
});
});
【问题讨论】：
-
无意冒犯......但请改写并仅显示代码的相关部分......阅读起来很笨重！
-
content hide背后的 CSS 是什么？如果您不希望它出现在页面中，它应该是display:none;。 -
我对其进行了编辑以使其更清晰，并添加了内容 CSS 和主导航 JS
-
虽然隐藏您不想看到的内容可能会更好，但您熟悉 css 光标吗？ css-tricks.com/almanac/properties/c/cursor
标签： javascript jquery html css