Question

我有两段（比如id＆＃34; p1＆＃34;＆＃34; p2＆＃34;）

我想在点击链接时从一个转换到另一个，反之亦然，当点击一个不同的链接时。它们位于同一页面上，但一次只显示一个（使用javascript隐藏一个，然后在单击链接时显示另一个）。

两段都有＆＃34;隐藏页面＆＃34;作为他们的课程。

css会不会像这样？

.hidden {
    opacity: 0;
    display: none;
    transition: opacity 1s linear;
}

.page { 
    transition: opacity 1s linear;  
    opacity: 1;
}

我知道不是这样，但会有类似的东西吗？

编辑：链接到css，js和html文件的要点

https://gist.github.com/EricHanLiu/a4b09862f2d25b6c6e5f

编辑了一些像名字电话#mail等的东西，但主要关注的是中间的两段

Answer 1

如果您在点击某个链接时试图淡入一个段落，如果可见则淡化另一个段落，那么您可以执行以下操作：

Live Preview

<强> HTML：

<a id="first" href="#p1">1</a> <a id="second" href="#p2">2</a>

<div class="fadeIn">
  <p id="p1" class="hidden">I am the first paragraph.</p>
</div>

<div class="fadeIn">
  <p id="p2" class="hidden">I am the second paragraph.</p>
</div>

<强> CSS：

.hidden {
  opacity: 0;
}

/*fade in transition css below*/

.fadeIn p {
  -webkit-transition: opacity 2.0s ease-in;
  -moz-transition: opacity 2.0s ease-in;
  -o-transition: opacity 2.0s ease-in;
}

.fadeIn p.clicked {
  opacity: 1;
}

<强> JavaScript的：

//helper function to select the element by id
function $(id){

  return document.getElementById(id);

}

//on click event for first 
$("first").addEventListener("click",function(event){

 //prevent page refresh or navigation
 event.preventDefault();



  $("p1").classList.add("clicked");

  $("p2").classList.remove("clicked")

});


//on click event for second
$("second").addEventListener("click",function(event){

 //prevent page refresh or navigation
 event.preventDefault();

  $("p1").classList.remove("clicked");

  $("p2").classList.add("clicked");


});

Answer 2

正如你所说，你需要两个链接分别触发两个段落。这是我解决问题的简单方法。我不确定这是你在找什么。但希望这会有所帮助！

<div>
    <p class="show" id="p1">Paragraph 1</p>
    <p class="hidden" id="p2">Paragraph 2</p>
    <a href="#" id="sb1">Show Paragraph 1</a>
    <a href="#" id="sb2">Show Paragraph 2</a>
  </div>

  <script type="text/javascript">
    var sb1 = document.getElementById('sb1');
    var sb2 = document.getElementById('sb2');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    sb1.addEventListener('click', function() {
      p1.classList.remove('hidden');
      p1.classList.add('show');
      p2.classList.remove('show');
      p2.classList.add('hidden');
    });

    sb2.addEventListener('click', function() {
      p1.classList.remove('show');
      p1.classList.add('hidden');
      p2.classList.remove('hidden');
      p2.classList.add('show');
    });
  </script>

在上面的脚本中，我只是在两段中切换了各自的类。

有很多解决方案，您可以使用jQuery来简化此解决方案。

在文本元素之间转换两种方式

2 个答案: