Question

我该怎么做？带3个链接的菜单（A B C）。 “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

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

超级简单但不可能的菜单

2 个答案: