單擊相應的錨點時，淡入div代替另一個div

Question

我有一個3格，其中2個設置為不顯示，而1個可見。

我下面有3個鏈接，每個鏈接對應於一個div，單擊鏈接中的一個時，我需要它淡入與之相關的div並淡出當前活動的div（如果有意義）？

Ive添加了一個小提琴，如您所見，當前正在顯示“ director”，我想能夠單擊底部的鏈接之一，例如，帳戶，並使其淡出董事div並​​淡入帳戶div。 ..

http://jsfiddle.net/m2hSK/

Answer 1

如果更改類，則必須在包含的div和觸發鏈接上添加一個標題屬性，並在同一類上添加一個“推子”類（以下示例）：

<div class="fader" title="directors">
<a href="#" class="fader" title="directors">directors</a>

CSS變為：

div.fader {display:none;}

腳本可以如下所示：

$(document).ready(function(){
    // On link click, the corresponding div needs to fade into the team-profile and the other    
    // needs to fade out...
    $('div.fader[title="directors"]').show();
    $('a.fader').click(function (e) {
        var t = $(this).attr('title');
        $('div.fader').hide('slow');
        $('div.fader[title="' + t + '"]').show('slow');
        e.preventDefault();
        return false;
    });
});

在您的jsfiddle上工作並經過測試。 完整的HTML源代碼如下：

     <div class="fader" title="directors">
         <h2>Our Directors</h2>
         <ul class="team">
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
        </ul>
     </div>









     <div class="fader" title="sales">
         <h2>Our Sales Team</h2>
         <ul class="team">
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
        </ul>
     </div>










     <div class="fader" title="accounts">
         <h2>Our Accounts Team</h2>
         <ul class="team">
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
        </ul>
     </div>
     <div>
     <br /><br />
     <a href="#" class="fader" title="accounts">Accounts</a><br />
     <a href="#" class="fader" title="sales">sales</a><br />
     <a href="#" class="fader" title="directors">directors</a>

希望這可以幫助。 皮特