html - 超级简单但不可能的菜单

Question

我该怎么做呢？带有 3 个链接 (ABC) 的菜单。“A.html”在开始时显示。单击链接“B”时，“A”淡出，“B”淡入。

每次点击链接。内容由淡出和淡入改变。如果可能的话，我希望浏览器返回按钮工作。

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

<div content>
 A
</div content>

Answer 1

试试这个：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());
    });
});

Answer 2

你将需要 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());
 }

多田！！完成。

在现场看到这个