1

我正在尝试使用此内容切换器。而且我已经让它在 JS Fiddle 中运行良好。但是当我尝试在我的网站上实现它时，它不能正常工作。第一个面板正确显示，当我单击链接时，它会正确淡入第二个面板。

但是，当我单击第一个或任何其他链接时，它会再次淡入相同的内容（从第一次单击的任何链接）。这是带有损坏滑块的页面。任何帮助将非常感激。

的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;
}
4

1 回答 1

1

问题：小提琴

一旦你删除了所有子元素，你就会在其中覆盖内容元素#ourstory-content等。然后在第二次单击期间，没有要获取的源 html，这就是它不起作用的原因#ourpeople-content#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 回答