2015-10-02 4 views
0

Я новичок в JS, и я пытаюсь выяснить, как я могу сделать простой сценарий JS, в котором пользователь нажимает/нажимает на div, другой div открывается. Заранее спасибо. Если бы кто-то мог мне помочь, я был бы очень благодарен.JS при нажатии на div другой div открывается

+1

использовать простые JS или некоторые рамки делать? У вас есть код прямо сейчас? Некоторые jsfiddle с вашей работой будут полезны – zucker

+0

Что вы подразумеваете под открытием div? – Bit68

+0

Да, сначала вам нужно поделиться своим фрагментом кода. Без кода, я думаю, вы хотите программно генерировать щелчок по элементу. Это версия jquery: http://stackoverflow.com/questions/2847185/how-to-programmatically-trigger-the-click-on-a-link-using-jquery. это не-jquery версия: http://stackoverflow.com/questions/906486/how-can-i-programmatically-invoke-an-onclick-event-from-a-anchor-tag-while-kee – Hammer

ответ

0

Вы можете использовать .target псевдо-класса. Для этого определим следующие правила CSS:

HTML:

<div class="product"> 
    <img src="http://placehold.it/100x100"/> 
    <a href="#shoes">Show Shoes</a> 
</div> 

<div class="product-highlight" id="shoes"> 
    <p>These are the shoes</p> 
</div> 

CSS:

#shoes { 
    display: none; /* hide by default */ 
} 
#shoes:target, /* and show either if class show is present (on click) */ 
#shoes.show { /* or location hash matches id "shoes" */ 
    display: block; 
} 

и в JS вы бы добавить класс show:

$(document).ready(function() { 

    $('.product-highlight').hide(); 

    $('a[href$=shoes').click(function() { 
    $('#shoes').addClass('show'); 
    }); 

}); 

Когда перенаправления с индексной странице вам также необходимо установить хэш-#shoes:

$(document).ready(function() { 

    $('a[href$=shoes]').click(function() { 

    window.location.href= 'http://sample.com/products.php/#shoes'; 

    }); 
}); 

Refer This page

или

$(document).ready(function(){ 
    $(".Test2").hide(); 
    $(".Test1").show(); 

    $('.Test1').click(function(){ 
     $(".Test2").slideToggle(); 
    }); 
}); 

WORKING FIDDLE

+0

У меня есть попытался изменить скрипт, но я пришел в тупик. Можете ли вы взглянуть на то, что я сделал, и сказать, что я делаю неправильно. Я был бы очень благодарен и прошу прощения за то, что вы потеряли время. Заранее спасибо. Ссылка JS Fiddle ---> http://jsfiddle.net/fu2k5sch/2/ –

+0

http://jsfiddle.net/ivinraj/pgssep6c/ @DimchoStoimenov –

0

Это может дать вам представление о том, что вы хотите ...

HTML

<div style="background-color: red"> 
<a href="#" id="panel1">Panel1</a> 
<p id="pm1" style="display:none;">Message Hello From Panel1</p> 
</div> 

<div style="background-color: Blue"> 
<a href="#" id ="panel2">Panel2</a> 
<p id="pm2" style="display:none;">Message Hello From Panel2</p> 
</div> 

Jquery

$('#panel1').click(function(){ 

$("#pm1").show(1000); 
$("#pm2").hide(1000); 

}); 

$('#panel2').click(function(){ 

$("#pm1").hide(1000); 
$("#pm2").show(1000); 

}); 
Смежные вопросы