1

I'm trying to use this content switcher. And I've got it working fine in JS Fiddle. But when I try to implement it on my site it doesn't work properly. The first panel displays correctly and when I click the link it fades to the second panel correctly.

BUT, when I click the first or any other link it fades the same content (from whatever link is first clicked) in again. Here's the page with the broken slider. Any help would be much appreciated.

The HTML:

<div id="fp_nav" class="text_box">
   <a id="ourstory" class="switcher">Our Story</a> 
   <a id="ourpeople" class="switcher">Our People</a>
   <a id="ourcustomers" class="switcher">Our Customers</a> 
   <a id="contactus" class="switcher">Contact Us</a>
</div>

<div id="switcher-panel" class="content">  
   <div id="ourstory-content" class="switcher-content show"><strong>BREAD OF LIFE BAKERY</strong> is a non-profit organization run by physically disabled young adults...</div> 
   <div id="ourpeople-content" class="switcher-content"><strong>Our People</strong> are good people.</div>          
   <div id="ourcustomers-content" class="switcher-content"><strong>Our Customers</strong> are really good customers.</div>          
   <div id="contactus-content" class="switcher-content"><strong>Contact Us</strong> to order some really great bakery items.</div>
</div>

And the jQuery:

var jcps = {};
jcps.fader = function (speed, target, panel) {
    jcps.show(target, panel);
    if (panel == null) {
        panel = ''
    };
    jQuery('.switcher' + panel).click(function () {
        var _contentId = '#' + jQuery(this).attr('id') + '-content';
        var _content = jQuery(_contentId).html();
        if (speed == 0) {
            jQuery(target).html(_content);
        } else {
            jQuery(target).fadeToggle(speed, function () {
                jQuery(this).html(_content);
            }).fadeToggle(speed);
        }
    });
};
jcps.slider = function (speed, target, panel) {
    jcps.show(target, panel);
    if (panel == null) {
        panel = ''
    };
    jQuery('.switcher' + panel).click(function () {
        var _contentId = '#' + jQuery(this).attr('id') + '-content';
        var _content = jQuery(_contentId).html();
        if (speed == 0) {
            jQuery(target).html(_content);
        } else {
            jQuery(target).slideToggle(speed, function () {
                jQuery(this).html(_content);
            }).slideToggle(speed);
        }
    });
};
jcps.show = function (target, panel) {
    jQuery('.show').each(function () {
        if (panel == null) {
            jQuery(target).append(jQuery(this).html() + '<br/>');
        } else {
            var trimPanel = panel.replace('.', '');
            if (jQuery(this).hasClass(trimPanel) == true) {
                jQuery(target).append(jQuery(this).html() + '<br/>');
            }
        }
    });
}

jQuery(document).ready(function () {
    jcps.fader(300, '#switcher-panel');
});

And a very small amount of CSS: 

.switcher-content {
display: none;
}
4

1 に答える 1

1

問題:フィドル

すべての子要素が削除されると、オーバーライドするコンテンツ要素#ourstory-contentなど#ourpeople-contentがあります。次に、2回目のクリック時に取得するソースhtmlがないため、機能していません#ourpeople-contentjQuery(this).html(_content)var _content = jQuery(_contentId).html();

それはあなたのdom操作のためです

解決

表示パネルとソース コンテンツ パネルを分離する

<div id="switcher-panel" class="content">
</div>

<div id="switcher-panel1" class="content">
    <div id="ourstory-content" class="switcher-content show">
        <strong>BREAD OF LIFE BAKERY</strong> is a non-profit organization run by physically disabled young adults who have grown up in orphanages in China.
        All our profits are used to help orphans and children in China, especially those who are handicapped, by providing funds for surgeries, wheelchairs and other needs.
        Bread of Life Bakery is proud to be a sister organization to Agape Family Life House, continuing its mission by providing handicapped young adults with not only a job, but a promising future of independence through education, job readiness and a family.
    </div>
    <div id="ourpeople-content" class="switcher-content">
        <strong>Our People</strong> are good people.
    </div>
    <div id="ourcustomers-content" class="switcher-content">
        <p><strong>Our Customers</strong> are really good customers.</p>
    </div>
    <div id="contactus-content" class="switcher-content">
        <p><strong>Contact Us</strong> to order some really great bakery items.</p>
    </div>
</div>

#switcher-panel1 {
    display: none;
}

デモ:フィドル

于 2013-03-25T04:22:29.270 に答える