Супер простое, но невозможное меню

Question

Как это сделать? Меню с 3 ссылками (A B C). "A.html" отображается при запуске. При нажатии ссылки «B» «A» исчезает, и «B» исчезает.

Каждый раз, когда нажимается ссылка. Содержимое изменяется путем fadeout и fadein. Если возможно, мне бы хотелось, чтобы браузеры снова работали.

<div menu> 
<link> A </link> 
<link> B </link> 
<link> C </link> 
</div menu> 

<div content> 
A 
</div content> 

Answer 1

вам потребуется Javascript или JQuery для этого

видеть ваше невозможное возможным ниже:

место разметки, как этот

<div class="menu"> 
    <ul> 
     <li class="active"> 
     <a href="#" > A </a> 
     <div class="A hidden"> 
      <h1> Hello I am A </h1> 
      <img src="y.jpg">   
     </div> 
     </li> 
     <li> 
     <a href="#" > B </a> 
     <div class="B hidden"> 
      <h1> Hello I am B </h1> 
      <img src="y.jpg"> 
     </div> 
    </li> 
    </ul> 
</div> 

<div class="content"> 

</div> 

и поместить простой JQuery код, как это:

//find the changeContent function to the click of anchors 
$('a').on('click',function(){ 
    changeContent(this); 
}); 

//load the first content by default 
changeContent($('li.active').find('a:first')); 

function changeContent(target){ 
    $('li').removeClass('active'); 
    $(target).parent().addClass('active'); 
    $('.content').html($(target).siblings('div').html()); 
} 

TADA !! готово.

увидеть это в live

Answer 2

Попробуйте это: http://jsfiddle.net/fAvcq/9/

HTML

<div id="menu"> 
    <a href="#">A</a> 
    <a href="#" class="active">B</a> 
    <a href="#">C</a> 
</div> 
<div id="content">A</div> 

CSS

.active { 
    color: red; 
} 

JS

$(document).ready(function(){ 
    $('#menu a[class=active]').fadeOut('slow'); 

    $('#menu a').click(function(){ 
     $('#menu a[class=active]').fadeIn('slow'); 
     $('#menu a[class=active]').removeClass(); 

     $(this).addClass('active'); 
     $('#menu a[class=active]').fadeOut('slow'); 

     $('#content').html($(this).html()); 
    }); 
});