0

タイトル名でごめんなさい、どう説明したらいいのかわからなかったです笑。

基本的に、jQueryを使用して同じページのコンテンツを開くページがあります。基本的に、ページが読み込まれると簡単なセクションが開きますが、別のリンクをクリックすると、このコンテンツが閉じて新しいコンテンツが読み込まれます。 ..私も試しました： "。show（0）.siblings（）。hide（0）;" しかし、それはすべてを非表示にし、この特定のdivを表示するだけです。

コードは次のとおりです。

<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS-reset.css">
<link rel="stylesheet" type="text/css" href="testing.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>


<header id="header-main" role="Header, banner, logo">

    <hgroup class="logo" role="logo">
    <img src="Logo.png" width="150" height="150">
    </hgroup>
</header>

 <nav class="navigation" role="navigation">

    <a href="#" id="briefLink">Brief</a><br />
    <a href="#" id="researchLink">Research</a><br />
    <a href="#" id="ideasLink">Ideas</a><br />
    <a href="#" id="designLink">App Design</a><br />
    <a href="#" id="implementationLink">Implementation</a>
</nav>      

    <section class="content brief" role="Things about the brief">
    BRIEF
    </section>

    <section class="content research" role="Things for research">
    RESEARCH
    </section>

    <section class="content ideas" role="The ideas part goes here">
    IDEAS
    </section>

    <section class="content design" role="The design part goes here">
    DESIGNS
    </section>

    <section class="content implementation" role="The implementation goes here">
    IMPLEMENTATION
    </section>


    <script>

    $(document).ready(function()
    {
        //$('.brief').hide();
        $('.research').hide();
        $('.ideas').hide();
        $('.design').hide();
        $('.implementation').hide();

          $('#researchLink').click(function()
          {
                var divname= this.name;
                $('.research').show(0).siblings().hide(0);
          });

          $('#ideasLink').click(function()
          {
                $('.ideas').show();
          });

          $('#designLink').click(function()
          {
              $('.design').show();
          });

          $('#implementationLink').click(function()
          {
              $(toggle);
              $('.implementation').show();
          });

    }); 

</script>

4

1 に答える 1

3

トグルロジックを少し抽象化してみてください。これが更新された例です-http://jsfiddle.net/jaredhoyt/Cj4rn/1/

于 2012-05-04T23:04:30.280 に答える