Переход в обоих направлениях между текстовыми элементами

Question

У меня есть два абзаца (позволяет сказать, что с идентификатором «p1» и «p2»)

Я хотел бы перейти от одного к другому, когда нажата ссылка, и наоборот, когда нажата другая ссылка. Они расположены на одной странице, но одновременно отображается только одна (с помощью javascript, чтобы скрыть, а затем отобразить другую, когда нажимается ссылка).

Оба абзаца имеют «скрытую страницу» в качестве своих классов.

Будет ли css напоминать что-то вроде этого?

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

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

Я знаю, что это не так, но было бы что-то подобное?

EDIT: Ссылка на суть в CSS, JS и HTML файлы

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

вырезаны некоторые вещи, как имя телефон # адрес электронной почты и т.д., но основное внимание уделяется два пунктов в середине

Answer 1

Как вы сказали, вам нужны две ссылки для запуска двух абзацев, соответственно. Вот мое простое решение вашей проблемы. Я не уверен, что это то, что вы ищете. Но, надеюсь, это помогает!

<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 для упрощения этого решения.

Answer 2

Если вы пытаетесь исчезать в одном пункте при нажатии на ссылку и утрачен другую, если она видна, то вы можете сделать что-то вроде следующего:

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"); 


});