0

どうすればいいですか？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>
4

2 に答える 2

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

多田!! 終わった。

これはライブで見ます

于 2013-03-27T10:27:05.910 に答える
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());
    });
});
于 2013-03-27T10:28:54.593 に答える