Используйте ссылки, чтобы скрыть элементы

Question

У меня есть сайт с двумя изображениями и текстом. Мне нужно закодировать его так, чтобы он отображал текст при загрузке, но при нажатии ссылки текст исчезает и появляется изображение. И при нажатии другой ссылки появляется другое изображение. Это, вероятно, нуждается в javascript/jquery. Я исследовал об изменении класса, чтобы он отображался: нет, но я не могу заставить его работать. Благодарю. это макет: http://amosjackson.com/index

Answer 1

Используйте hide() и show() в сочетании с мероприятием click.

$('#myLink1').click(function() { 
    $('#image1').show(); 
    $('#text1').hide(); 
}); 

Answer 2

Чтобы использовать JQuery, вы должны загрузить его с http://jquery.com/, поместите его там, где вы хотите на вашем сайте, то вы должны импортировать его на странице, где вы хотите его использовать.

Put это в вашей голове страницы: <script src="/path/to/jquery/jquery-x.x.x.min.js"></script>

<script> 
    $(document).ready(function(){ 
     $('#homelink').click(function() { 
      $('#contact,#tardis').addClass("invisible"); 
      $('#home').removeClass("invisible"); 
     }); 
     $('#bloglink').click(function() { 
      $('#contact,#home').addClass("invisible"); 
      $('#tardis').removeClass("invisible"); 
     }); 
     $('#contactlink').click(function() { 
      $('#tardis,#home').addClass("invisible"); 
      $('#contact').removeClass("invisible"); 
     }); 
    }); 
</script> 

Изменение href="" в href="javascript:void(0)" в ссылках меню.

В вашем CSS поставить этот класс:

.invisible{ display: none; } 

Наконец установить invisible класс по DIV с именем контактом и TARDIS.