Показать / Скрыть по клику

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

Многие согласятся с тем, что использование тегов привязки для выполнения 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 скрывает его.Свойство display второго div имеет значение none при загрузке страницы.Javascript изменит этот атрибут при нажатии на ссылку.

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

Answer 3

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

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

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

или

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

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

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

Answer 4

Вкладки будут лучшим способом сделать это.Существует множество учебных пособий для вкладок jQuery - вот довольно простой , который довольно хорошо обрисовывает концепции, а - более продвинутый (который использует CSS для создания закругленных углов навкладки).

Answer 5

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

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

Answer 6

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

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