Question

抱歉标题名称我不知道如何解释这个大声笑..

基本上，我有一个页面使用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>

Answer 1

尝试抽象切换逻辑。以下是您更新的示例 - http://jsfiddle.net/jaredhoyt/Cj4rn/1/

显示/隐藏仅显示当前内容

1 个答案: