我无法为需要显示的内容选择合适的课程。
我需要用户点击链接，然后在页面上向下滑动该内容。
这是链接...
<header>
<div id="logo">
WEB DEV
</div>
<nav>
<ul>
<li id="first"><a id="html5" href="#">HTML5</a></li>
<li><a id="css3" href="#">CSS3</a></li>
<li><a id="jquery" href="#">jQuery</a></li>
<li><a id="php" href="#">PHP</a></li>
<li><a id="flash" href="#">Flash</a></li>
</ul>
</nav>
</header>
这是我需要根据用户点击的链接向下滑动的内容...
<div id="content">
<div id="defaultTabs" class="contentContainer">
<div id="defaultTab01" class="topicContent">
<a href="http://www.modernizr.com"><img src="images/sitePics/sitePic_Modernizr.png" alt="The Modernizr website - www.modernizr.com"></a>
<h3>The Modernizr website - "front-end development done right"</h3>
<p>Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
<a href="http://www.modernizr.com">read more</a></p>
<div>General</div>
</div>
<div id="defaultTab02" class="topicContent">
<a href="http://tympanus.net/codrops"><img src="images/sitePics/sitePic_codrops.png" alt="Tutorials and articles on web design/development including jQuery, HTML5, and CSS3"></a>
<h3>Tutorials on jQuery, HTML5, and CSS3</h3>
<p>Codrops is a web development blog that publishes articles and tutorials about web design, programming and usability. The team of Codrops is dedicated to provide useful and qualitative content that is free of charge.
<a href="http://tympanus.net/codrops">read more</a></p>
<div>General</div>
</div>
</div> <!-- end div#jqueryTabs -->
<div id="html5Tabs" class="contentContainer">
<div id="html5Tab01" class="topicContent">
<a href="http://www.w3schools.com/html/default.asp"><img src="images/sitePics/sitePic_HTML501.png" alt="Learn HTML5 at www.w3schools.com"></a>
<h3>Learn HTML5 at w3schools.com</h3>
<p>Go through an HTML5 tutorial and learn about new elements in HTML5 relating to video, audio, canvas, and forms. Utilize a reference for HTML5 tags, attributes, and events.
<a href="http://www.w3schools.com/html/default.asp">read more</a></p>
<div>HTML5</div>
</div>
<div id="html5Tab02" class="topicContent">
<a href="http://www.sitepoint.com/tag/html5-dev-center"><img src="images/sitePics/sitePic_HTML502.png" alt="sitepoint.com - HTML5 Development Center"></a>
<h3>The HTML5 Development Center at sitepoint.com</h3>
<p>One of many sections on the Sitepoint website that hosts articles related to web development. This page has a wide variety of articles that relate to HTML5.
<a href="http://www.sitepoint.com/tag/html5-dev-center">read more</a></p>
<div>HTML5</div>
</div>
<div id="html5Tab03" class="topicContent">
<a href="http://dev.w3.org/html5/html-author"><img src="images/sitePics/sitePic_HTML503.png" alt="The W3C HTML 5 Reference"></a>
<h3>The W3C HTML 5 Reference</h3>
<p>A web developer's guide to HTML 5 drafted by the W3C. Covers most everything related to the HTML 5 specification including all of the tags, etc...
<a href="http://dev.w3.org/html5/html-author">read more</a></p>
<div>HTML5</div>
</div>
</div> <!-- end div#html5Tabs -->
<div id="css3Tabs" class="contentContainer">
<div id="css3Tab01" class="topicContent">
<a href="http://www.w3schools.com/css3/default.asp"><img src="images/sitePics/sitePic_CSS301.png" alt="Learn CSS3 at www.w3schools.com"></a>
<h3>Learn CSS3 at w3schools.com</h3>
<p>Go through a CSS3 tutorial and learn about new effects available and what browsers they work in. There is also a CSS3 reference on this site for selectors, attribute/value pairs, etc...
<a href="http://www.w3schools.com/css3/default.asp">read more</a></p>
<div>CSS3</div>
</div>
<div id="css3Tab02" class="topicContent">
<a href="http://www.css3.info"><img src="images/sitePics/sitePic_CSS302.png" alt="CSS3.info - Everything you need to know about CSS3"></a>
<h3>CSS3.info - Everything you need to know about CSS3</h3>
<p>This site contains a preview of CSS3 attributes and their values along with many articles on CSS3 topics. It also allows you to test various CSS3 selectors in your browser to see if they are compatible.
<a href="http://www.css3.info">read more</a></p>
<div>CSS3</div>
</div>
<div id="css3Tab03" class="topicContent">
<a href="http://css3please.com"><img src="images/sitePics/sitePic_CSS303.png" alt="css3please.com"></a>
<h3>The CSS3, please website</h3>
<p>CSS3, please is a no-frills site showing examples of new CSS3 selectors and attribute/value pairs that you can copy and paste right into your browser. It includes all of the variants that work in any browsers that support CSS3.
<a href="http://css3please.com">read more</a></p>
<div>CSS3</div>
</div>
</div> <!-- end div#css3Tabs -->
<div id="jqueryTabs" class="contentContainer">
<div id="jqueryTab01" class="topicContent">
<a href="http://www.jquery.com"><img src="images/sitePics/sitePic_jQuery01.png" alt="The jQuery website - www.jquery.com"></a>
<h3>The jQuery website - "write less, do more"</h3>
<p>Learn about and download the jQuery JavaScript library at www.jquery.com. jQuery's purpose is to allow you to more easily traverse HTML documents, handle events, and animate content via easy to understand code.
<a href="http://www.jquery.com">read more</a></p>
<div>jQuery</div>
</div>
<div id="jqueryTab02" class="topicContent">
<a href="http://api.jquery.com"><img src="images/sitePics/sitePic_jQuery02.png" alt="Help documentation for jQuery methods at api.jquery.com"></a>
<h3>The jQuery API - documentation of jQuery methods</h3>
<p>This extremely helpful website contains help documentation for all of jQuery's built-in methods. The help pages are laid out in a easy to read fashion yet give very good depth of information.
<a href="http://api.jquery.com">read more</a></p>
<div>jQuery</div>
</div>
</div> <!-- end div#jqueryTabs -->
<div id="phpTabs" class="contentContainer">
<div id="phpTab01" class="topicContent">
<a href="http://www.jquery.com"><img src="images/sitePics/sitePic_php01.png" alt="The jQuery website - www.jquery.com"></a>
<h3>The jQuery website - "write less, do more"</h3>
<p>Learn about and download the jQuery JavaScript library at www.jquery.com. jQuery's purpose is to allow you to more easily traverse HTML documents, handle events, and animate content via easy to understand code.
<a href="http://www.jquery.com">read more</a></p>
<div>PHP</div>
</div>
<div id="phpTab02" class="topicContent">
<a href="http://api.jquery.com"><img src="images/sitePics/sitePic_php02.png" alt="Help documentation for jQuery methods at api.jquery.com"></a>
<h3>The jQuery API - documentation of jQuery methods</h3>
<p>This extremely helpful website contains help documentation for all of jQuery's built-in methods. The help pages are laid out in a easy to read fashion yet give very good depth of information.
<a href="http://api.jquery.com">read more</a></p>
<div>PHP</div>
</div>
<div id="phpTab03" class="topicContent">
<a href="http://tympanus.net/codrops"><img src="images/sitePics/sitePic_php03.png" alt="Tutorials and articles on web design/development including jQuery, HTML5, and CSS3"></a>
<h3>Tutorials on jQuery, HTML5, and CSS3</h3>
<p>Codrops is a web development blog that publishes articles and tutorials about web design, programming and usability. The team of Codrops is dedicated to provide useful and qualitative content that is free of charge.
<a href="http://tympanus.net/codrops">read more</a></p>
<div>PHP</div>
</div>
</div> <!-- end div#phpTabs -->
<div id="flashTabs" class="contentContainer">
<div id="flashTab01" class="topicContent">
<a href="http://www.jquery.com"><img src="images/sitePics/sitePic_flash01.png" alt="The jQuery website - www.jquery.com"></a>
<h3>The jQuery website - "write less, do more"</h3>
<p>Learn about and download the jQuery JavaScript library at www.jquery.com. jQuery's purpose is to allow you to more easily traverse HTML documents, handle events, and animate content via easy to understand code.
<a href="http://www.jquery.com">read more</a></p>
<div>Flash</div>
</div>
<div id="flashTab02" class="topicContent">
<a href="http://api.jquery.com"><img src="images/sitePics/sitePic_flash02.png" alt="Help documentation for jQuery methods at api.jquery.com"></a>
<h3>The jQuery API - documentation of jQuery methods</h3>
<p>This extremely helpful website contains help documentation for all of jQuery's built-in methods. The help pages are laid out in a easy to read fashion yet give very good depth of information.
<a href="http://api.jquery.com">read more</a></p>
<div>Flash</div>
</div>
<div id="flashTab03" class="topicContent">
<a href="http://tympanus.net/codrops"><img src="images/sitePics/sitePic_flash03.png" alt="Tutorials and articles on web design/development including jQuery, HTML5, and CSS3"></a>
<h3>Tutorials on jQuery, HTML5, and CSS3</h3>
<p>Codrops is a web development blog that publishes articles and tutorials about web design, programming and usability. The team of Codrops is dedicated to provide useful and qualitative content that is free of charge.
<a href="http://tympanus.net/codrops">read more</a></p>
<div>Flash</div>
</div>
</div> <!-- end div#flashTabs -->
</div> <!-- end div#content -->
这就是我对JQuery的看法......
$(function() {
$('#contentWrap').css({height: '2em'});
$('#leftSideBar').css({height: '25em'});
$('header nav ul li a').on('click', function(event) {
// this newTopicContent is returned as a string
var newTopicContent = $(this).text();
$('#topic').fadeOut(500, function() {
$('#topic').text(newTopicContent).fadeIn(500);
});
var newContentID = $(this).attr('id') + 'Tabs';
$(newContentID, '.contentContainer').slideDown();
});
});
我无法理解如何使用newContentID选择适当的.contentContainer div，您应该将其滑入到位。我会很感激一些见解。
答案 0 :(得分：1)
如果您只需要选择正确的contentContainer，那么请将最后两行更改为
var newContentID = '#' + $(this).attr('id') + 'Tabs';
$(newContentID).slideDown();
$(this).attr('id')从您点击的任何链接（例如“html5”）中获取ID，然后在开头添加“＃”，并将“Tabs”添加到该ID的末尾，例如， #html5Tabs。有了这个jQuery，可以选择ID为“html5Tabs”的元素并向下滑动。