2

それらを複数のdiv内に配置すると、機能しなくなったようです。私は何が欠けていますか？ありがとう

デモ： http： //jsfiddle.net/HVfaA/206/

<div id="content">
<div id="first">
<div id="first-1">
<div id="first-2">
<div id="first-3">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
</div>
</div>
</div>
<div id="second">
<div id="second-1">
<div id="second-2">
<div id="second-3">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
</div>
</div>
</div>
</div>
</div>

$("div#second > div").hide();
var divs = $("#one, #two, #three, #four");
$('li a').on('click', function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});​

この関数は、Peter Ajtai jQueryが提供する関数の修正バージョンです。クリックするとdivが表示され、他の関数は非表示になります

以下の元の質問：リンクを含む別のdivを使用して、divを表示しようとしていました。現在、リンクをクリックすると、非表示のdivは表示されません。ご協力いただきありがとうございます。これがjsfiddleのデモです-http ://jsfiddle.net/HVfaA/184/

<div id="first">
<li><a href="#" class="one">One</a></li>
<li><a href="#" class="two">Two</a></li>
<li><a href="#" class="three">Three</a></li>
<li><a href="#" class="four">Four</a></li>
</div>
<br /><br />
<div id="second">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</div>

// Optional code to hide all divs
$("div#second").hide();

// Selector
var divs = $("#one, #two, #three, #four");

// Show chosen div, and hide all others
$("li a").click(function () 
{
$("#" + $(this).attr("class")).show();
divs.not(("#" + $(this).attr("class"))).hide();
});
4

3 に答える 3

4

問題は、すべてのdivをラップして、div#secondその要素を非表示にしたことです。親が非表示になっているため、子div（#one, #two, #three, #four）は表示されません。

最初にすべてのdivを非表示にする場合は、

// Optional code to hide all divs
$("div#second > div").hide();

これは直接関係していませんが、余談ですがdivs.not(("#" + $(this).attr("class"))).hide();、divを非表示にするときの順序を変更するだけで省略できます（すべてを非表示にしてから1つを表示します）。divsまた、直接参照することもできるので、すでに保存しているので。

// Show chosen div, and hide all others
$("li a").click(function () {
    $(divs).hide();
    $("#" + $(this).attr("class")).show();
});​

更新されたフィドルhttp://jsfiddle.net/HVfaA/190/を参照してください

于 2012-11-06T04:39:28.390 に答える
2

クリックハンドラーにdivを表示するだけで、機能します。

$("div#second").show();

デモ：http：//jsfiddle.net/HVfaA/191/

于 2012-11-06T04:42:37.230 に答える
0

CSS：

.Main-Div {position: relative; left: -9999px;}
.Inner-Div {position: relative; left: 9999px;}

Javascript：

// Optional code to hide all divs
$("div#second > div").addClass('Main-Div');

// Selector
var divs = $("#one, #two, #three, #four");

// Show chosen div, and hide all others
$('li a').on('click', function () {
    $(divs).removeClass('Inner-Div');
    $("#" + $(this).attr("class")).addClass('Inner-Div');
});

フィドル

于 2012-11-06T21:27:55.327 に答える