[英]How to hide all divs except for one with jQuery? (undefined function error)
I want to hide all divs except for one when clicking on the corresponding link. 我想在单击相应链接时隐藏除一个以外的所有div。 I found some code that seems to meet my needs, but I keep getting an undefined function error in console. 我发现一些代码似乎可以满足我的需求,但是在控制台中却不断出现未定义的函数错误。 (Uncaught ReferenceError: showonlyone is not defined) (未捕获的ReferenceError:未定义showonlyone)
<aside>
<div><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Blog</a></div>
<div><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Shop</a></div>
<div><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Press/Media</a></div>
</aside>
<section class="main">
<div class="newboxes" id="newboxes1" >
<h2>Here's the Blog!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
</div>
<div class="newboxes" id="newboxes2" >
<h2>This Section is Where to Shop for Water</h2>
<ul>
<li>Shop Here</li>
</ul>
</div>
<div class="newboxes" id="newboxes3" >
<h2>Here's all the press and Media Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
</div>
</section>
<script>
$(document).ready(function(){
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
});
</script>
This code will work: 该代码将起作用:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<aside>
<div><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Blog</a></div>
<div><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Shop</a></div>
<div><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Press/Media</a></div>
</aside>
<section class="main">
<div class="newboxes" id="newboxes1" >
<h2>Here's the Blog!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
</div>
<div class="newboxes" id="newboxes2" >
<h2>This Section is Where to Shop for Water</h2>
<ul>
<li>Shop Here</li>
</ul>
</div>
<div class="newboxes" id="newboxes3" >
<h2>Here's all the press and Media Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
</div>
</section>
<script>
$ = jQuery;
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
Note, that I am linking to Google's hosted jquery.min.js. 请注意,我正在链接到Google托管的jquery.min.js。 Also, as user false points out in his comment your showonlyone is scoped inside the call to ready. 此外,正如用户false在其评论中指出的那样,您的showonlyone范围在调用ready的范围内。 That is the root cause of the error message you are seeing. 这是您看到的错误消息的根本原因。
Here is a simple and very flexible way, jsfiddle link 这是一个简单且非常灵活的方法, jsfiddle链接
<aside>
<div><a id="myHeader1" class="link" data-link="newboxes1" href="javascript:void();">Blog</a>
</div>
<div><a id="myHeader2" class="link" data-link="newboxes2" href="javascript:void();">Shop</a>
</div>
<div><a id="myHeader3" class="link" data-link="newboxes3" href="javascript:void();">Press/Media</a>
</div>
</aside>
<section class="main">
<div class="newboxes" id="newboxes1">
<h2>Here's the Blog!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
</div>
<div class="newboxes" id="newboxes2">
<h2>This Section is Where to Shop for Water</h2>
<ul>
<li>Shop Here</li>
</ul>
</div>
<div class="newboxes" id="newboxes3">
<h2>Here's all the press and Media Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
</div>
</section>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") === thechosenone) {
$(this).show(200);
} else {
$(this).hide(600);
}
});
}
$(function(){
$('.link').click(function(){
showonlyone($(this).data("link"));
});
});
There is a better way of setting up your links rather than relying on the href="javascript..."
to call your function... JSFiddle 有一种更好的方法来建立链接,而不是依靠href="javascript..."
来调用函数... JSFiddle
You will need to include the jQuery file like this: 您将需要包含jQuery文件,如下所示:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
New Javascript (and jQuery): 新的Javascript(和jQuery):
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
} else {
$(this).hide(600);
}
});
}
$(function(){
/*set up all your links to run the showonlyone() function*/
$('#myHeader1').click(function(){
showonlyone('newboxes1');
});
$('#myHeader2').click(function(){
showonlyone('newboxes2');
});
$('#myHeader3').click(function(){
showonlyone('newboxes3');
});
});
Adjusted HTML: 调整后的HTML:
<aside>
<!--the links in your nav no longer need the href attribute to call the javascript so the void(0) just allows the anchor tag to still behave like a link -->
<div><a id="myHeader1" href="javascript:void(0);">Blog</a></div>
<div><a id="myHeader2" href="javascript:void(0);">Shop</a></div>
<div><a id="myHeader3" href="javascript:void(0);">Press/Media</a></div>
</aside>
<section class="main">
<div class="newboxes" id="newboxes1">
<h2>Here's the Blog!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
</div>
<div class="newboxes" id="newboxes2">
<h2>This Section is Where to Shop for Water</h2>
<ul>
<li>Shop Here</li>
</ul>
</div>
<div class="newboxes" id="newboxes3">
<h2>Here's all the press and Media Stuff</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
</div>
</section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.