Показать/скрыть элемент на основе щелкнули HREF в ссылку

Question

Я новичок в JavaScript и на самом деле довольно отчаянный к настоящему

У меня есть файл HTML, который:

1. получает данные из файла XML, и отображает их в разных divs (например)
2. эти divs скрыты (по умолчанию) от имени класса (class = 'box')
3. При нажатии ссылки передается функция ' #, а затем найдите элемент с этим идентификатором в документе.
4. Затем я добавляю новое имя класса ('show') - чтобы этот элемент появился!

Если вы запустите код, который вы увидите, что каждый раз, когда вы нажимаете на ссылку отображается новый DIV ...

Так текущие проблемы:

1. заменяющие уже показано дивы с новый щелчок, чтобы каждый раз отображался только один div.
2. Как я могу избежать вставки события onClick в каждый отдельный тег - и сделать это более автоматическим?

---

Мой код выглядит следующим образом:

function showContent(obj) 
{ 
var linkTo = obj.getAttribute("href"); 
var newlinkTo=linkTo.replace('#',''); 
//alert (newlinkTo); 

document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go"; 
document.getElementById(newlinkTo).className += " Show"; 

return true; 
} 

<a href="#b0" onClick="return showContent(this);"> 
<div id="text_content"> link2 </div> 
</a> 

<a href="#b1" onClick="return showContent(this);"> 
<div id="text_content"> link 1 </div> 
</a> 

<div class='box' id='b0'> abstract content </div> 
<div class='box' id='b1'> introduction content </div> 

Answer 1

Это не сложно обойтись без jQuery.

Я бы порекомендовал использовать хеш-банг (#!) Для активированных Javascript-ссылок, чтобы сохранить его отдельно от других возможных ссылок с хэшами. (Скрипт находится в нижней части)

<div id="nav-links"> 

    <a href="#!b0"> 
    <div id="text_content"> link2 </div> 
    </a> 

    <a href="#!b1"> 
    <div id="text_content"> link 1 </div> 
    </a> 

</div> 

<div class='box' id='b0'> abstract content </div> 
<div class='box' id='b1'> introduction content </div> 

<script type="text/javascript"> 

    var links = document.getElementById('nav-links').getElementsByTagName('a'); 
    for(var i = 0, link; link = links[i]; i++) { 
     link.onclick = showContent; 
     // Hide content divs by default 
     getContentDiv(link).style.display = 'none'; 
    } 
    // Show the first content div 
    if(links.length > 0) showContent.apply(links[0]); 

    var current; 

    function showContent() { 

     // hide old content 
     if(current) current.style.display = 'none'; 

     current = getContentDiv(this); 
     if(!current) return true; 

     //current.innerHTML = "This is where the xml variable content should go"; 
     current.style.display = 'block'; 

     return true; 

    } 

    function getContentDiv(link) { 

     var linkTo = link.getAttribute('href'); 

     // Make sure the link is meant to go to a div 
     if(linkTo.substring(0, 2) != '#!') return; 
     linkTo = linkTo.substring(2); 

     return document.getElementById(linkTo); 

    } 

</script>​ 

Answer 2

Я обычно не в использовании JQuery везде, но с ним вы можете просто сделать:

<a class='showContent' data='b0'/> 

Ваши ЯШ:

var selected; 

$('a.showContent').on('click',function(e){ 
    var toShow = $(this).attr('data'); 
    if(selected!==undefined) selected.removeClass('Show'); 
    selected = $(div+'#'+toShow); 
    selected.addClass('Show'); 
}); 

Не уверен, что это то, что вы хотите, но подумал, что я предлагаю это.

Answer 3

Существует способ очистки способ сделать это:

Это просто мой быстрый пример, он может получить еще чище, чем это, но это работает для вашего случая:

HTML:

<a href="#b0" id="b0-link" class="link" rel="b0">link b0</a> 

<a href="#b1" id="b1-link" class="link" rel="b1">link b1</a> 

<div class='box' id='b0'> abstract content </div> 
<div class='box' id='b1'> introduction content </div>​​​​​​​​​ 

CSS:

#b0 { display: none; } 

#b1 { display: none; } 

a, div.text_content { display: inline; padding: 0 10px; } 

Jquery:

​$('.link').click(function(){ 
    var id = $(this).attr("rel"); 

    $('#'+id).slideToggle('slow');      
}); 

Каждая ссылка будет иметь атрибут REL, который совпадает с идентификатором сНом элемента, который вы пытаетесь показать.

Вот JSFiddle этого примера в действии:

http://jsfiddle.net/CUJSM/5/