Переключая divs в javascript

Я хочу переключить divs, нажав на ссылки. но дела не идут хорошо для меня, когда я нажимаю на ссылку он показывает новый DIV, но дон скрыть предыдущийПереключая divs в javascript

JavaScript код

<script type="text/javascript"> 
    function toggle(id){ 
     var el = document.getElementById(id); 
     if(el != null && el.style["display"]== 'none'){ 
      el.style["display"] = "block"; 
     } 
    } 
</script>

Мой дивы код

<?php foreach($titles_data as $title){ ?> 
<div style="display:none" id="content_<?php echo $title['idtitles'] ?>"> 
    <div id="left-ad"></div> 
</div> 
<?php } ?>

Мои ссылки код

<?php foreach($titles_data as $title){ ?> 
<li class="flag_<?php echo strtoupper($title['language']) ?>"> 
<a id="title_<?php echo $title['idtitles'] ?>" href="" title="<?php echo $title['title'] ?>" onclick="toggle('content_<?php echo $title['idtitles'] ?>')"> 
</a> 
</li> 
<?php } ?>

Как это можно сделать, чтобы при щелчке по ссылке его соответствующий iv стал vi и предыдущий скрывается?

Благодаря

источник

2012-03-19 Faryal Khan

С текущим кодом вы не скрываете ранее отобранный элемент div! – hjpotter92

Рассмотрите возможность использования инфраструктуры JavaScript, такой как JQuery. Это очень поможет вам в вашей работе и облегчит вашу жизнь. – Songo

Почему вы выбрали тег 'jquery', если вы его не используете? – vol7ron

Для переключения дисплея, вам не нужно делать много

$("#elementid").toggle();

Со ссылкой на ваш вопрос

$('a').click(function() { // however this is select all anchors, better use class 
          // selector like $(".mylinkclass") 
    var id= $(this).attr('id'); //get the id 
    var ids = id.splite("_"); //split the id on "_", to extract the idtitles 
    $("#content_"+ids[0]).toggle(); // use that to toggle 
});

источник

2012-03-19 12:04:00 Starx

может предоставить это с ссылкой на мой код? –

@FaryalKhan, я не уверен, что отображается 'content_ {some id}'.У вас есть ссылка, где я могу проверить, полный html, чтобы увидеть структуру макета – Starx

У меня нет ссылки, но вы можете просто рассмотреть ее как отдельный div –

Использование родных JS:

function toggle(id){ 
    var el = document.getElementById(id);   
    el.style.display = el.style.display == "none" ? "block" : "none"; 
} 

toggle("myId");

Usi нг JQuery:

function toggle(selector) { 
    $(selector).toggle(); 
} 

toggle("#myId");

источник

2012-03-19 12:07:07 andlrc

Спасибо за быстрый ответ –

Предполагая, что всегда есть только один DIV, который отображается, вы можете проверить на него: Alter вашу логику, чтобы объявить глобальную переменную для хранения значения видимых в данный момент дел. А затем обновите эту переменную всякий раз, когда нажимается ссылка, чтобы удерживать идентификатор текущего видимого div. Таким образом, используя свой exisitng код, вы можете сделать это:

использованием Ядро JavaScript:

 var visibleDiv; 
function toggle(id){ 
    // hide the previous div using visibleDiv 
    if(document.getElementById(visibleDiv)!= null) document.getElementById(visibleDiv).style["display"] = "none"; 
    var el = document.getElementById(id); 
    if (el.style["display"] == "" || el.style["display"] == 'none'){ 
     el.style["display"] = 'block'; 
    } 
    visibleDiv = id; // update the current visible div name 
}

с помощью JQuery так:

 var visibleDiv; 
$("[id^=content_]").each(function() { 
if($(this).is(':visible')){ 
    visibleDiv = $(this).attr('id'); 
} 

});

источник

2012-03-19 12:27:52 MrClan

хорошая идея, но ее не работает :( –

что я на самом деле хочу сделать, так это то, что у меня уже активный div с id = 'main-content', а другие divs скрыты с идентификатором = content_ {id} где id - номер ... и есть разные ссылки на один скрытый div. Я хочу заменить скрытый div активным div, когда я нажимаю его соответствующую ссылку. –

. Вы должны иметь ранее активный идентификатор div в переменной * visibleDiv *. В своем втором комментарии, если вы имеете в виду это, вы хотите заменить текущий видимый div на div с нажатой ссылкой, то вы можете использовать переменную visibleDiv, чтобы скрыть предыдущую. Кроме того, если он не работает, попробуйте проверить с помощью firebug а затем дайте мне знать, что такое ошибка ??? – MrClan

Проверьте мой новый ответ. Я просто создал образец html-страницы с тремя div. Сначала показаны все. Когда вы нажимаете на один из них, он скрыт. Когда вы нажимаете на другой div. Старый вид снова отображается, а текущий скрыт. Измените логику в соответствии с вашими требованиями.

 <html> 
<head> 
<title>asdsa</title> 
<script type="text/javascript"> 
var visibleDiv; 
function toggled(id){ 
    //$('#div_2').html($('#div_1').html()); 
    if(document.getElementById(visibleDiv) != null){ document.getElementById(visibleDiv).style["display"] = "block";} 
    var el = document.getElementById(id); 
    document.getElementById(id).style["display"] = "none"; 
    visibleDiv = id; 
} 
</script> 
</head> 
<body> 
    <div id="div_1" onclick="toggled('div_1')">div1</div> 
    <div id="div_2" onclick="toggled('div_2')">div2</div> 
    <div id="div_3" onclick="toggled('div_3')">div3</div> 
    <hr/> 
</body> 
</html>

Спасибо.

источник

2012-03-19 13:46:01 MrClan

Спасибо за ваши усилия, но либо это не то, что мне нужно, либо его не работает для меня :( –

Переключая divs в javascript

ответ

Смежные вопросы