Question

我在这里找到了Stackoverflow函数，它应该在多个div之间切换。我在JSFiddle中尝试过它并且有效。但对我来说，在网站上，它并不起作用。我真的不擅长javascript / jQuery，所以我很乐意为你提供帮助！还有一件事 - 是否有可能设置链接，我只是点击添加类＆＃34;活动＆＃34;，它会有下划线或什么，看看哪个部分被选中？谢谢！ - FIDDLE HERE：https://jsfiddle.net/vkmw86bp/

代码如下。

HTML：

      <div id="sluzby-nabidka" class="section">
        <div class="sluz"><a href="#" data-slide-id="#slidingDiv">div 1</a></div>
        <div class="sluz"><a href="#" data-slide-id="#slidingDiv_2">div 2</a></div>
        <div class="sluz"><a href="#" data-slide-id="#slidingDiv_3">div 3</a></div>
        <div class="sluz"><a href="#" data-slide-id="#slidingDiv_4">div 4</a></div>
        <div class="sluz"><a href="#" data-slide-id="#slidingDiv_5">div 5</a></div>


      </div>



      <div id="text-sluzba" class="section">

<div id="slidingDiv" class="slide-div">1</div>
<div id="slidingDiv_2" class="slide-div" style="display:none;">2</div>
<div id="slidingDiv_3" class="slide-div" style="display:none;">3</div>
<div id="slidingDiv_4" class="slide-div" style="display:none;">4</div>
<div id="slidingDiv_5" class="slide-div" style="display:none;">5</div>

      </div>

JS：

$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide',
        slideDiv: '.slide-div'
    };
    var options = $.extend(defaults, options);

    return this.each(function () {
        $(this).click(function () {
            $(options.slideDiv).hide();
            // this var stores which button you've clicked
            var toggleClick = $(this),
                toggleDiv = $(this).data('slide-id');
            // here we toggle show/hide the correct div at the right speed and using which easing effect
            $(toggleDiv).fadeToggle(options.speed, options.easing, function () {
                // this only fires once the animation is completed
                // if(options.changeText==0){
                //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
                //}

            });


        });

    });

};

$('a').showHide({'slideDiv' : '.slide-div'});

Answer 1

由于我还没有足够的声誉来添加评论，我会谈到这个问题，然后在必要时询问更多信息。

当我加载你的JSFiddle时，它不起作用，因为小提琴本身没有包含JQuery库。一旦我切换了Frameworks＆amp;对任何 JQuery库的扩展选择，我点击Run并且它有效。所以，这就是IMO，意味着您的JQuery导入要么位于HTML DOM中的错误位置，要么在点击您提供的代码之前不等待DOM准备就绪。 Som例子：

<html>
    <head>
        <title>
        </title>
        <!-- normally, JQuery script gets added here -->
        <script type="javascript" src="path/to/jquery.js"></script>
    </head>
    <body>

<!-- then, import the above code here, either as a separate JS file or inside some <script></script> tags -->
        <script type="javascript" src="path/to/showHide.js"></script>
    </body>
</html>

此外，您应该包含您提供的代码：

$(document).ready(function() {
    // Your code here
});

这将确保在加载DOM之前JQuery代码不会执行。在我看来，您的代码在DOM准备好之前运行，因此当您进行此调用时，查找未找到任何锚标记以将showHide功能附加到：

$('a').showHide({'slideDiv' : '.slide-div'});

jQuery - 在多个div之间切换不起作用

1 个答案: