jQuery

Question

我在 Whosebug 上找到了一个函数，它应该在多个 div 之间切换。我在 JSFiddle 中尝试过它并且它有效。但对我来说，在网站上，它不起作用。我真的不擅长 javascript / jQuery，所以我会很高兴能得到任何帮助！还有一件事 - 是否可以设置 link，我刚刚单击添加 class "active"，它会有下划线或其他东西，以查看选择了哪个部分？谢谢！ -- FIDDLE 此处：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 库没有包含在 fiddle 本身中。一旦我将框架和扩展选择切换到 any JQuery 库，我点击运行并且它起作用了。因此，IMO，这意味着您的 JQuery 导入要么在 HTML DOM 中的错误位置，要么您没有等待 DOM 准备好点击您提供的代码。示例：

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

这将确保 JQuery 代码在 DOM 加载之前不会执行。在我看来，你的代码是运行在 DOM 准备好之前，所以当你拨打电话：

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

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

jQuery - toggle between multiple divs doesn't work

javascript

toggle