Question

我想让text1,2,3显示在同一个div中。当我点击不同的图像来更改文本并关闭之前的文本时。

这是脚本：

$(document).ready(function() {
  $('#slickbox').hide();
  $('a#slickbox-toggle').click(function() {
      $('#slickbox').slideToggle(400);
      return false; 
  });
});

$(document).ready(function() {

    $('#slickbox1').hide();
    $('a#slickbox-toggle1').click(function() {
        $('#slickbox1').slideToggle(400);
        return false; 
    });
});

$(document).ready(function() {
    $('#slickbox2').hide();
    $('a#slickbox-toggle2').click(function() {
        $('#slickbox2').slideToggle(400);
        return false; 
    });
});

$(document).ready(function() {
    $('#slickbox3').hide();
    $('a#slickbox-toggle3').click(function() {
        $('#slickbox3').slideToggle(400);
        return false; 
    });
});

HTML：

<div id="ponuda">
    <a id="slickbox-toggle" href="#"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>

    <a id="slickbox-toggle1" href="#"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>

    <a id="slickbox-toggle2" href="#"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>

    <a id="slickbox-toggle3" href="#"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>
</div>

<div  id="slickbox">
    TEXT   
</div>
<div  id="slickbox1">
    TEXT1   
</div>
<div id="slickbox2">
    TEXT2   
</div>
<div id="slickbox3">
    TEXT3   
</div>

Answer 1

为了便于阅读和简化，我正在提出完整的建议。我修改了你的标记以实现这一目标。如果不可能，请告诉我。

HTML：

<div id="ponuda">
    <a id="slickbox-toggle" class="slickbox-toggle-class" href="#slickbox"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>

    <a id="slickbox-toggle1" class="slickbox-toggle-class" href="#slickbox1"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>

    <a id="slickbox-toggle2" class="slickbox-toggle-class" href="#slickbox2"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>

    <a id="slickbox-toggle3" class="slickbox-toggle-class" href="#slickbox3"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130"></a>
</div>

<div  id="slickbox" class="slickbox-class">
    TEXT   
</div>
<div  id="slickbox1" class="slickbox-class">
    TEXT1   
</div>
<div id="slickbox2" class="slickbox-class">
    TEXT2   
</div>
<div id="slickbox3" class="slickbox-class">
    TEXT3   
</div>

JS：

$(document).ready(function() {
  $('.slickbox-class').hide();
  $('#ponuda a.slickbox-toggle-class').click(function() {
      $('.slickbox-class').hide();
      $($(this).attr("href")).slideToggle(400);
      return false; 
  });
});

的jsfiddle： http://jsfiddle.net/W6SLF/

Answer 2

在这里，你没有改变代码中的任何内容，只是jQuery =＆gt; http://jsfiddle.net/XfCvm/5/

$(document).ready(function() {    
      $('div[id^=slickbox]').slideUp(0);

  $('a[id^=slickbox-toggle]').click(function() {
      var index=$(this).index();
      $('div[id^=slickbox]').not(':eq('+index+')').slideUp(400);
      $('div[id^=slickbox]').eq(index).slideToggle(400);
      return false;
  });
});

Answer 3

嗯，我们都有不同的做事方式。我试图删除重复的代码并使其更具可读性：

请参阅下面的代码注释以及包含您的div内容的data-slick-content属性的用法：）

<强> HTML：

<div id="ponuda">

    <a href="#" class="toggle-slick" data-slick-content="TEXT"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130" /></a>

    <a href="#" class="toggle-slick" data-slick-content="TEXT1"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130" /></a>

    <a href="#" class="toggle-slick" data-slick-content="TEXT2"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130" /></a>

    <a href="#" class="toggle-slick" data-slick-content="TEXT3"><img src="http://hotelpalicresort.rs/wp-content/themes/palic/images/specijalna-ponuda.png" alt="Smiley face" height="100" width="130" /></a>
</div>

<!-- See that we declare this as hidden by default, choose as you like -->
<div id="slickbox" class="hidden">
    <!-- By default, we have TEXT-->
    TEXT 
</div>

<强> CSS：

#ponuda{
    display:inline;
}
#slickbox {
    background-color:#e1dbdb;
}
.hidden{
    display: none;
}

<强> JavaScript的：

$(document).ready(function() {

  /**
   * Method for showing slickbox content
   *
   */
  var toggleSlick = function(content) {

      // Push new text to an element slickbox
      $("#slickbox").html(content);

      // Show the element
      $('#slickbox').slideToggle(400);

  };

  // Bind clicks for all toggle-slick links
  $('.toggle-slick').click(function() {

      // Capture content from data-slick-content (e.g. TEXT1)
      var content = $(this).data("slick-content");

      // Hide previous if visible
      if($("#slickbox").is(":visible")) {
          $('#slickbox').slideToggle(400, function() {
             // Animation complete
             toggleSlick(content);   
          });

          return false;

      } 

      toggleSlick(content);

  });

});

这是 js fiddle example

干杯。

点击拇指在同一区域显示不同的文字

3 个答案: