Question

我对jquery有点新手。基本上我想只显示与点击链接相对应的div，并隐藏与该链接无关的div。

下面是我想要做的一个例子以及我正在努力解决的脚本。这适用于Wordpress，这就是为什么＆＃34; JQuery＆＃34;拼写而不仅仅是＆＃34; $＆＃34;。

＆＃13;

jQuery(document).ready(function() { 
	var clickLink = [".link1", ".link1", ".link1"];
	var toggleDiv = ["#link1", "#link1", "#link1"];
	for (i=0; i < toggleDiv.length; i++) {
		jQuery(toggleDiv[i]).hide();
	}
	jQuery('#linkBank a').click(function() {
           for (i=0; i < clickLink.length; i++) {
           		if (this.id == clickLink[i]) {
           			jQuery(toggleDiv[i]).toggle();
           		}
           }
           
           return false;
       });  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="linkBank">
<a href="#" id="link1">First Link</a>
<a href="#" id="link2">Second Link</a>
<a href="#" id="link3">Third Link</a>
</div>

<div class="link1">You clicked on First Link</div>
<div class="link2">You clicked on Second Link</div>
<div class="link3">You clicked on Third Link</div>

＆＃13;

Answer 1

您应该使用html数据属性并使用它来了解要显示的元素，这是最干净的方式，并且您不依赖于一组值或ID值与您希望显示的类相同。在这个例子中，我命名了'data-show'html属性，它的值基本上是你想要选择的元素的选择器（例如'.sth'对于带有'sth'类的元素，你可以使用#foo一个id为'foo'等的元素

jQuery(document).ready(function() {
        var $divs = jQuery('.toggling-divs');
        $divs.hide();
	jQuery('#linkBank a').click(function() {
           $divs.hide();
           var showDiv = jQuery(this).attr('data-show');
           jQuery(showDiv).show();
           
           return false;
       });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="linkBank">
<a href="#" id="link1" data-show=".first-link">First Link</a>
<a href="#" id="link2" data-show=".sth-else">Second Link</a>
<a href="#" id="link3" data-show=".foobar">Third Link</a>
</div>

<div class="first-link toggling-divs">You clicked on First Link</div>
<div class="sth-else toggling-divs">You clicked on Second Link</div>
<div class="foobar toggling-divs">You clicked on Third Link</div>

jquery：我想在点击相应的链接时显示一个特定的div

1 个答案: