[英]Issue in calling a particular DIV from HTML hyperlink within same page
我正在編輯我的問題以使其更簡單。 請看下面的代碼:
<div id="tabs">
<ul>
<li><a href="#tabs-a">First</a></li>
<li><a href="#tabs-b">Second</a></li>
<li><a href="#tabs-c">Third</a></li>
</ul>
<div id="tabs-a">Lorem ipsum dolor sit amet, rcitation ullamco laboris nisi</div>
<div id="tabs-b">et ornare, felis. Maecenas scelerisque sem non nisl. Fusce</div>
<div id="tabs-c">interdum eget, sagittis et, consequat vestibulum, lacus.</div>
</div>
上面的選項卡式瀏覽在jQuery的幫助下工作正常。
現在,我想使用同一頁面中的一些外部鏈接訪問這些選項卡,例如:
<div class="container">
<a href="#tabs-a">First</a>
<a href="#tabs-b">Second</a>
<a href="#tabs-c">Third</a>
<div>
但這是行不通的。 請幫忙!
$("#atabs1").click(function () {
$("#tabs-a").css("display", "block");
$("#tabs-b").css("display", "none");
$("#tabs-c").css("display", "none");
$("#tabs-d").css("display", "none");
});
$("#atabs2").click(function () {
$("#tabs-a").css("display", "none");
$("#tabs-b").css("display", "block");
$("#tabs-c").css("display", "none");
$("#tabs-d").css("display", "none");
});
$("#atabs3").click(function () {
$("#tabs-a").css("display", "none");
$("#tabs-b").css("display", "none");
$("#tabs-c").css("display", "block");
$("#tabs-d").css("display", "none");
});
$("#atabs4").click(function () {
$("#tabs-a").css("display", "none");
$("#tabs-b").css("display", "none");
$("#tabs-c").css("display", "none");
$("#tabs-d").css("display", "block");
});
為了方便起見,我對您的代碼做了一些更改。 我已經更改了div的ID,以便在jquery部分中輕松進行。 您的div ID從<div id="tabs-c" class="content">
更改為<div id="databs1" class="content">
只是為了與li
的ID匹配。
的HTML
<div id="tabs">
<ul>
<li><a class ="h" id="atabs1" href="#tabs-a">Goals & Purpose</a></li>
<li><a class ="h" id="atabs2" href="#tabs-b">The Gaps...</a></li>
<li><a class ="h" id="atabs3" href="#tabs-c">Output</a></li>
<li><a class ="h" id="atabs4" href="#tabs-d">Challenges</a></li>
</ul>
<div id="databs1" class="content">
<h2>Goals & Purpose</h2>
<h3>This page is under construction! Please come back soon!</h3>
</div>
<div id="databs2" class="content">
<h2>The Gaps...</h2>
<h3>This page is under construction! Please come back soon!</h3>
</div>
<div id="databs3" class="content">
<h2>Output</h2>
<h3>This page is under construction! Please come back soon!</h3>
</div>
<div id="databs4" class="content">
<h2>Challenges</h2>
<h3>This page is under construction! Please come back soon!</h3>
</div>
jQuery的
$('.h').click(function(){
var a = this.id;
a = 'd'+a;
$(".content").css("display", "none");
$('#'+a).css("display", "block");
});
希望以上代碼對您有所幫助,也希望您能實現這一目標。
這里是
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.