1

divs参照リンクをクリックすると、それらを非表示にして表示できる機能を見つけようとしています。

説明するのは難しいですが、ここに私が探しているものがあります：

<ul>
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 1</a></li>
   <li><a href="#id-3">Link 1</a></li>
<ul>
<div id="id-1">Some content</div> // Hidden
<div id="id-2">Some content</div> //  This should only show in document
<div id="id-3">Some content</div> // hidden

他のアンカーがクリックされているときはいつでも、他のアンカーは非表示にするdivs必要があります。

彼が理にかなっていることを願っています。事前にあなたの助けに感謝します

ドム

4

6 に答える 6

1

http://jsfiddle.net/

html

<ul>
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 2</a></li>
   <li><a href="#id-3">Link 3</a></li>
<ul>
<div id="id-1">Some content 1</div> 
<div id="id-2">Some content 2</div>
<div id="id-3">Some content 3</div>​

CSS

div {display: none;}

JavaScript/jquery

$("a").click( function(e) {
    e.preventDefault();    
    var elId = $(this).attr('href');
    $('div').hide();
    $(elId).show();
});​
于 2012-11-28T21:18:15.220 に答える
1

次のようなものを使用できます（テストされていないため、微調整が必​​要な場合があります）：

$(document).ready(function() {              //fires on dom ready

    $("a").click(function(e) {              //assign click handler to all <a> tags

        $(".classForYourDivs").hide();      //hide all divs (put class on ones you want to hide)

        var element = $(e.target);
        var href = element.attr("href");    //get the attribute

        $(href).show();                     //show the relevent one
        return false;                       //important to stop default click behavior of link
    });

});

ちなみに、この情報を保存するために href 以外のものを使用することを検討する必要があります... jquery data() 関数のドキュメントをご覧ください

于 2012-11-28T21:14:23.803 に答える
1

私はあなたのためにフィドルをセットアップしました。チェックアウトしてください：http://jsfiddle.net/UsGag/

function currentActive()
{
    return $("li.active a").attr("href");
}

$("div:not(" + currentActive() + ")").hide();

$("li a").on("click", function()
{
    //hide old active div
    $("div" + currentActive()).hide();
    $("li").removeClass("active");

    //activate new div
    $(this).parent().addClass("active");    
    $("div" + currentActive()).show();
});

これがあなたの役に立てば幸いです。あなた自身のニーズに合わせて拡張してください。-完全を期すために、ids / classnamesでは使用しないでください。</p>

于 2012-11-28T21:19:58.860 に答える
1

試す

$("a").click( function( ) {
    var elId = $(this).attr("href");
    $(elId).show().siblings("div[id^=id-]").hide();
});

ここでフィドル

于 2012-11-28T21:09:40.613 に答える
1

とにクラスを追加しulますdivs。

<ul class="myUL">
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 1</a></li>
   <li><a href="#id-3">Link 1</a></li>
<ul>
<div id="id-1" class="myDivs">Some content</div> // Hidden
<div id="id-2" class="myDivs">Some content</div> //  This should only show in document
<div id="id-3" class="myDivs">Some content</div> // hidden

次にCSSで、

.myDivs { display: none; }

以下のjsコードを試してください。

var $myDivs = $('.myDivs');
$('.myUL a').on('click', function () {
    $myDivs.hide();
    $($(this).attr('href')).show();
});

デモ: http://jsfiddle.net/LYKVG/

于 2012-11-28T21:15:19.040 に答える
1 
$("body").on("click","a", function(){
    var divtoshowselector = $(this).attr("href");
    $(divtoshowselector).show().siblings().hide();
})
于 2012-11-28T21:15:34.493 に答える