Question

我有多个项目包含内容（概述，详细信息）。 我是JQuery的新手

如何更换同一位置而非下方的内容？
如何让其他项目的内容不再消失？

HTML：

<div id="projects">
  <h2>Projects</h2>
  <!-- Start project 1-->
  <div class="project-image">
    <img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
  </div>
  <div class="project-info">
    <h3>First Project Title</h3>
    <div class="project-desc">
      <div class="div1">
        <p>First project overview here</p>
      </div>
      <div class="div2" style="opacity:0">
        <p>More detailed description here</p>
      </div>
    </div>
    <div class="project-nav">
      <a href="#project" data-id="1">Overview</a>
      <a href="#project" data-id="2">Details</a>
    </div>
  </div>
  <!-- End of project 1 -->

  <!-- Start project 2 -->
  <div class="project-image">
    <img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
  </div>
  <div class="project-info">
    <h3>Second Project Title</h3>
    <div class="project-desc">
      <div class="div3">
        <p>Second project overview here</p>
      </div>
      <div class="div4" style="opacity:0">
        <p>More detailed description here</p>
      </div>
    </div>
    <div class="project-nav">
      <a href="#project" data-id="3">Overview</a>
      <a href="#project" data-id="4">Details</a>
    </div>
  </div>
  <!-- End of project 2 -->
</div>

JQuery的：

(function($) {
  $(".project-nav a").click(function() {
    var target = '.div' + $(this).attr("data-id");
    $(".project-desc >div").css("opacity", "0");
    $(target).css("opacity", "1");
  });
})(jQuery);

所有在一起：JsFiddle

Answer 1

这是我的看法：

$(function() {
    $(".project").each(function() {
        let $project = $(this);
        $project.find("nav a").click(function() {
            $project.find(".project-info > p").hide();
            $project.find("." + $(this).attr("href")).show();
            return false;
        });
    });
});

.project {
    padding: 0.5em;
    border: 1px solid black;
    margin: 1em 0;
}

.project-image {
    display: block
}

.details {
    display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projects">
    <h2>Projects</h2>
    <!-- Start project 1 -->
    <div class="project">
        <img class="project-image" src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
        <div class="project-info">
            <h3>First Project Title</h3>
            <p class="overview">First project overview here</p>
            <p class="details">More detailed description here</p>
            <nav>
                <a href="overview">Overview</a>
                <a href="details">Details</a>
            </nav>
        </div>
    </div>
    <!-- End of project 1 -->

    <!-- Start project 2 -->
    <div class="project">
        <img class="project-image" src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
        <div class="project-info">
            <h3>Second Project Title</h3>
            <p class="overview">Second project overview here</p>
            <p class="details">More detailed description here</p>
            <nav>
                <a href="overview">Overview</a>
                <a href="details">Details</a>
            </nav>
        </div>
    </div>
    <!-- End of project 2 -->
</div>

我专注于减少HTML并使导航功能变得灵活，因此您可以随意添加项目和导航链接，而无需担心现有链接。

Answer 2

正如@ j08691所说，只需将$button-color: #fff;替换为opacity:0，将display: none替换为opacity: 1;，请参阅修改后的JSFiddle

Answer 3

我也已经解决了，但我认为这样做更容易。那我做了什么。但是，如果你能在没有CSS的情况下做到这一点，那么为什么要轻松。

我在HTML中删除了一些div。

我所做的是对JQuery的好习惯

＆＃13;

var showTheRightStuffAtTheRightPlace = function(){
  var $selector = $(this);
  var whatProject = $selector.attr("data-id");
  var whatDoINeedToShow = $selector.html();
  var String;
  switch(whatDoINeedToShow){
    case 'Overview':
      String = '<p>First project overview here</p>'
    break;
    case 'Details':
      String = '<p>More detailed description here</p>';
    break;
  }
  $('.' + whatProject).html(String);
};


var init = function () {
 $(".project-nav").on('click','a',showTheRightStuffAtTheRightPlace);
};
$(document).ready(init());

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="projects">
  <h2>Projects</h2>
  <!-- Start project 1-->
  <div class="project-image">
    <img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
  </div>
  <div class="project-info">
    <h3>First Project Title</h3>
    <div class="project-desc project1">
    </div>
    <div class="project-nav">
      <a href="#project" data-id="project1">Overview</a>
      <a href="#project" data-id="project1">Details</a>
    </div>
  </div>
  <!-- End of project 1 -->

  <!-- Start project 2 -->
  <div class="project-image">
    <img src="http://mathworld.wolfram.com/images/gifs/SmallTriambicIcosahedron.gif" />
  </div>
  <div class="project-info">
    <h3>Second Project Title</h3>
    <div class="project-desc project2">
     
    </div>
    <div class="project-nav">
      <a href="#project" data-id="project2">Overview</a>
      <a href="#project" data-id="project2">Details</a>
    </div>
  </div>
  <!-- End of project 2 -->
</div>

＆＃13;

使用链接交换/更改div内容

3 个答案: