Javascript 如何在滑块的每个选项卡打开时显示JS警报？

我正在使用网页上的脚本，并在网页上创建了滑块，html代码如下所示：

<div class="liquid-slider" id="slider-id">
     <div>
          <h2 class="title">Slide 1</h2>
          // Content goes here
     </div>
     <div>
          <h2 class="title">Slide 2</h2>
          // Content goes here
     </div>
     <div>
          <h2 class="title">Slide 3</h2>
          // Content goes here
     </div>
</div>

目前，用户每次单击panel选项卡时，都会显示4次消息“you opened panel”，这是因为这些行：

$('.slider-1-panel').each(function() {
    alert("you opened panel");
});

如何更改它，使每个面板只显示一次消息？稍后，我想向每个面板添加css中的动画，以便在用户选择面板时调用它们，我认为最好的开始是知道用户何时选择任何面板

正如您所建议的，我创建了一个，我添加了资源，但我无法正确地构建和运行它，我不知道我在那里做错了什么。。但是css代码在那里是可见的，希望这足够有用

编辑： 我决定再加一点细节。我创建了一个选项，在用户单击任何选项卡时更改所有选项卡：

$('#slider-1').liquidSlider({
     autoHeight:false,
  slideEaseFunction:'animate.css',
  slideEaseDuration:1000,
  heightEaseDuration:1000,
  animateIn:"fadeIn",
  animateOut:"fadeOut",
  callback: function() {
    var self = this;
    $('.slider-1-panel').each(function() {
      $(this).removeClass('animated ' + self.options.animateIn);
    });

    $('#slider-1-nav-ul a').each(function() {
      $(this).css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
      $(this).css('color', '#'+Math.floor(Math.random()*16777215).toString(16));
     })


  }
     });

---

但是现在我需要更改

$（'#slider-1-nav-ula'）。每个（function（）{

部分不查看所有选项卡，而是查看刚刚单击的选项卡。我该怎么做？

您可以将您的

警报

移出

每个

，然后每个面板只显示一次消息。

为每个

标记添加不同的id，并在js中添加以下代码

$（“.title”）。单击（函数（e）{
var panelName=$（this.attr（'id'）；
警报（面板名称）；
})；

---

希望这会有所帮助

您需要为每个选项卡提供一个id，以供jquery/javascript引用

<div class="liquid-slider"  id="monitor-slider">
                <div id= "name_this> 
                  <h2 class="title">Slide 1</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
                <div id= "name_this_different>
                  <h2 class="title">Slide 2</h2>
                  <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
                </div>          
                <div id= "name_this_different_again> 
                  <h2 class="title">Slide 3</h2>
                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
                </div>

</div>

$("This").click(function(){
    alert("This tab.");
});

幻灯片2
这是一个很好的例子。这是一个很好的例子。这是一个很好的例子。这是一个很好的例子

将类添加到每个元素中（这里我使用
.tabs
）
div
元素，这样可以很容易地循环那些
div
。
使用jquery
each
方法循环所有div

$('.liquid-slider .tabs').each(
    function() {
        $(this).click(
            function() {
                alert('you open panel ' + $(this)[0].id);
            }
        );
    }
);

编辑

然后，在您的项目中尝试以下操作：

$('#slider-1-nav-ul a').each(function() {
        $(this).click(function() {
            $(this).css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
            $(this).css('color', '#'+Math.floor(Math.random()*16777215).toString(16));
        });
     })

解释

所有的每个循环
创建jsfiddle/show完整的相关代码OK，完整的相关代码在感谢中，但是有没有一种方法可以同时在警报函数上显示面板名称？你能根据我的？谢谢！！警报（“此面板名称”）告诉我该脚本的确切位置吗；//因为每个选项卡将有3个独立的单击函数……我这样做是为了让您可以将它们更改为任何内容……只需在HTMLTanks的body标记底部添加jquery，我只是不知道脚本如何引用“this”到每个选项卡..我是否应该将其更改为某个选项卡指示器？我的网页上有许多其他脚本和div，因此JS可能会在此处混淆？很抱歉我的混淆…我是否在此处执行此操作？在我的情况下，此操作不正常：（嘿，我按照你的建议做了，但不幸的是，我没有看到警报……我删除了插件液体滑块实例化并运行了它！嘿，是的，它工作得非常好，很抱歉响应太晚！我只是误解了它，因为它在用户按下标题时工作，但是液体滑块脚本本身会更改它以使标题也显示为一个导航菜单栏，看到了吗？当前，当我按下标题时，它会调用警报，而不是菜单栏，这就是为什么meSo将其设置为解析时会如此混乱！：）和恭喜，你做到了！：）仅
警报（this.id）；
或
警报（$（this）[0].id）
或
$（this.attr（“id”）
$('#slider-1-nav-ul a').each(function() {
        $(this).click(function() {
            $(this).css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
            $(this).css('color', '#'+Math.floor(Math.random()*16777215).toString(16));
        });
     })