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 回答