Show/Hide On Click

Question

У меня есть одна область пространства и два текста тела для показа. У меня есть две «гиперссылки» над этой областью и хотели бы использовать их, чтобы показать/скрыть текст ниже. При первой загрузке страницы ничего не будет отображаться, кроме двух ссылок. Когда вы нажимаете одну ссылку, она отображает текст. Когда вы нажмете на другую ссылку, она скроет предыдущий текст и покажет новый текст. Есть только две гиперссылки, но я бы хотел, чтобы пользователь мог переключаться туда и обратно по своему усмотрению. Это возможно? Раньше я использовал javascript, чтобы отобразить текст, потому что они были в двух разных областях. Я не тоже опытный с написанием кода. Я нашел несколько других ответов на эту тему полезными, но большинство из них используют кнопки и прослушиватели кликов. Есть ли способ сделать это, используя гиперссылку? Примеры кода очень ценятся!

Answer 1

Вы можете определить класс в CSS, который говорит «Не показывать текст здесь», а затем использовать JS из гиперссылки, чтобы переключить класс элемента?

так что ваш HTML будет содержать:

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a> 
<div id="text1" class="hide"> text1 </div> 
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a> 
<div id="text2" class="hide"> text2 </div> 

Ваш CSS будет содержать:

div.hide { display:none; [your properties]; } 
div.show { [your properties]; } 

и ваши JS будет выглядеть примерно так:

function showText(show,hide) 
{ 
    document.getElementById(show).className = "show"; 
    document.getElementById(hide).className = "hide"; 
} 

Поможет ли это в все?

Answer 2

Там хороший JQuery скрипт, который делает что-то вдоль этих линий, посмотрите, чтобы увидеть, если это какой-нибудь хорошее для вас:

http://api.jquery.com/slideToggle/

Answer 3

Это возможно, но более удобный способ сделать это будет с чем-то вроде вкладок jquery. Это очень легко сделать с помощью вкладки jquery UI, это вся HTML-разметка со сценарием, который просто запускает .tabs(); как функция в ID элемента табуляции.

Вот ссылка: Jquery Tabs

Answer 4

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a> 

В JavaScript вы можете это сделать, если вы используете jQuery:

function myLinkButtonClick() 
{ 
    $("#myDiv").hide(); 
} 

или

function myLinkButtonClick() 
{ 
    $("#myDiv").show(); 
} 

В качестве альтернативы вы можете сделать .toggle

function myLinkButtonClick() 
{ 
    $("#myDiv").toggle(); 
} 

Answer 5

Многие согласятся с тем, что использование якорных тегов для выполнения Javascript (и ничего не делать) немного на грязной стороне, поскольку, помимо всего прочего, оно генерирует хэш-тег в адресной строке, который может смущать пользователей. Это не значит, что они не имеют места в исполнении JS.

Однако это очень возможно. Вот один из возможных решений:

<a href="#" onclick="show('div1')">Link1</a> 
<a href="#" onclick="show('div2')">Link2</a> 

<div id="div1">Text1</div> 
<div id="div2" style="display:none;">Text2</div> 

<script> 

    var currentDiv = document.getElementById("div1"); 
    function show(divID) { 

     var div = document.getElementById(divID); 

     currentDiv.style.display = "none"; 
     div.style.display = "block"; 

     currentDiv = div; 
    } 

</script> 

script тег определяет переменную и функцию: currentDiv, который ссылается в данный момент отображается Div элемент и show функцию, которая используется для скрытия отображаемой в данный момент DIV и показать новый один.

Якорные метки вверху, при нажатии, вызывают функцию show, заменяя отображаемый элемент на тот, который указан тегом привязки.

Чтобы получить элементы для отображения/скрыть, код изменяет атрибут CSS display элемента. Значение block показывает элемент div, а его значение скрывается в размере none. Второй div имеет свой display свойство, установленное на none, когда страница загружается. Javascript изменит этот атрибут при нажатии ссылки.

Нет, вам не нужен JQuery, но это может помочь.

Answer 6

Табы были бы лучшим способом для этого. На вкладках jQuery есть много уроков - вот fairly basic one, в которых очень хорошо описываются концепции и here's a more advanced one (в котором используется CSS для создания закругленных углов на вкладках).