Question

我正在尝试使用this content switcher.而且我在JS Fiddle中工作得很好。但是当我尝试在我的网站上实现它时，它无法正常工作。第一个面板正确显示，当我点击链接时，它正确地消失到第二个面板。

但是，当我点击第一个或任何其他链接时，它会再次淡出相同的内容（来自首次点击的链接）。这是page with the broken slider.任何帮助都会非常感激。

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>

和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');
});

只有极少量的CSS：

.switcher-content {
display: none;
}

Answer 1

问题：Fiddle

您在#ourstory-content内有内容元素#ourpeople-content，#ourpeople-content等，一旦您删除了所有子元素，您将覆盖jQuery(this).html(_content)。然后在第二次点击期间没有使用var _content = jQuery(_contentId).html();获取的源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;
}

演示：Fiddle

jQuery Content Switcher只切换一次

1 个答案: