Спрятать div по клику на ссылку

@HelloInside · Регистрация: 31.10.2011

Author24 — интернет-сервис помощи студентам

Пробовал написать сам, но с js еще не разобрался толком. Нужно по клику на ссылку один div спрятать, а другой отобразить.

https://jsfiddle.net/78xgL64b/

Код с песочницы

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<div>
<a href="#prev">Prev</a>
<a href="#next"> Next</a>
</div>
 
<div class="table1">
<p>Table #1</p>
<table>
<tr>
  <td>ex1</td>
  <td>ex2</td>
  <td>ex3</td>
</tr>
<tr>
  <td>ex1</td>
  <td>ex2</td>
  <td>ex3</td>
</tr>
<tr>
  <td>ex1</td>
  <td>ex2</td>
  <td>ex3</td>
</tr>
</table>
</div>
 
 
 
<div class="table2">
<p>Table #2</p>
<table>
<tr>
  <td>ex1</td>
  <td>ex2</td>
  <td>ex3</td>
</tr>
<tr>
  <td>ex1</td>
  <td>ex2</td>
  <td>ex3</td>
</tr>
<tr>
  <td>ex1</td>
  <td>ex2</td>
  <td>ex3</td>
</tr>
</table>
</div>

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
table,td {
  border: 1px solid silver;
}
td {
  padding: 5px;
  background-color: #ccc;
  color: #fafafa;
}
 
.table2 {
  display: none;
}

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
$document().ready(function() {
    $body.on('click.','a[href="#next"]',function(){
  $( ".table2" ).css({"display", "block"})
  })
 
});

@mrtoxas · 26.08.2016, 00:37

JavaScript    
        
    Скопировано
1
2
3
$('body').on('click', '[href="#next"]' ,function(){
  $( ".table2" ).show()
})

Добавлено через 1 минуту
Или

JavaScript    
        
    Скопировано
1
2
3
$('[href="#next"]').click(function(){
  $( ".table2" ).show()
})

@HelloInside · 26.08.2016, 01:43 **[ТС]**

mrtoxas, Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Мониторинг с Prometheus в PHP Jason-Webb 04.04.2025 Prometheus выделяется среди других систем мониторинга своим подходом к сбору и хранению метрик. В отличие от New Relic, который использует агентный подход и отправляет данные во внешнее хранилище,. . .	Пакет Context в Golang: Управление потоками и ресурсами golander 04.04.2025 Работа с горутинами в Go часто напоминает управление непослушными детьми - они разбегаются кто куда, делают что хотят и не всегда завершаются вовремя. К счастью, в Go 1. 7 появился пакет context,. . .	Контейнеризация React приложений с Docker Reangularity 03.04.2025 Контейнеризация позволяет упаковать приложение со всеми его зависимостями в автономный контейнер, который можно запустить на любой платформе с установленным Docker. Это существенно упрощает процессы. . .	Свой попап в SwiftUI mobDevWorks 03.04.2025 SwiftUI, как декларативный фреймворк от Apple, предоставляет множество инструментов для создания пользовательских интерфейсов. В нашем распоряжении есть такие API как alerts, popovers, action sheets. . .	Антипаттерны микросервисной архитектуры ArchitectMsa 03.04.2025 Хорошо спроектированная микросервисная система может выдержать испытание временем, оставаясь гибкой, масштабируемой и устойчивой к большинству проблем. Такая архитектура обладает высоким уровнем. . .
std::mutex в C++: Советы и примеры использования bytestream 03.04.2025 std::mutex - это механизм взаимного исключения, который гарантирует, что критический участок кода выполняется только одним потоком в каждый момент времени. Это простое, но могущественное средство. . .	Не удержался от оценки концепции двигателя Стирлинга. Hrethgir 03.04.2025 Сколько не пытался - она выдавала правильные схемы, причём случайно рисовала горячие области в середине, холодные по краям, трубки с краёв в низ и магнит в соединяющей, но при этой выдавала описание. . .	Метод с двумя буферами (или double buffering) или ping-pong buffering Hrethgir 02.04.2025 Из ответов LM модели. Метод, который предполагает использование двух массивов для хранения промежуточных результатов сложения векторов, обычно применяется в сценариях, где необходимо минимизировать. . .	На любовном киберфронте Alexander-7 01.04.2025 Недавно на одном малоизвестном сайте знакомств мною заинтересовалась девушка: «Текст немного странный. Но, судя по адресу почты, иностранка», – подумал я. Поколебавшись пару суток, я ответил ей:. . .	Как работает Node.js изнутри run.dev 29.03.2025 Node. js изменил подход к разработке веб-приложений, позволив использовать JavaScript не только на стороне клиента, но и на сервере. Созданный в 2009 году Райаном Далем, этот открытый,. . .

@HelloInside 8 / 8 / 13 Регистрация: 31.10.2011 Сообщений: 294
	26.08.2016, 01:43 [ТС]
	mrtoxas, Спасибо! 0