显示和隐藏使用JQuery

问题描述：

<div style="display: block;" id="FeaturedPromo1"> 
    <img title="Enjoy a refreshing shower" alt="Enjoy a refreshing shower" src="/english/images/spa.jpg"> 
    <div class="slideshow-br"> 
     <div class="slideshow-br-controls"> 
      <a style="display: inline;" title="Prev" href="#" class="slideshow-br-controls-left"></a> 
       <span> 
        <a id="active-banner-slide" style="display: inline;" title="Enjoy a refreshing shower" href="#" class="0-banner-button"></a> 
        <a style="display: inline;" title="The comfort of your own" href="#" class="1-banner-button"></a> 
       </span> 
      <a style="display: inline;" title="Next" href="#" class="slideshow-br-controls-right"></a> 
     </div> 
    </div>      
</div> 
<div style="display: none;" id="FeaturedPromo2"> 
    <img title="The comfort of your own Private Suite" alt="The comfort of your own Private Suite" src="/english/images/suites.jpg"> 
    <div class="slideshow-br"> 
     <div class="slideshow-br-controls"> 
      <a style="display: inline;" title="Prev" href="#" class="slideshow-br-controls-left"></a> 
       <span> 
        <a style="display: inline;" title="Enjoy a refreshing shower" href="#" class="0-banner-button"></a> 
        <a id="active-banner-slide" style="display: inline;" title="The comfort of your own" href="#" class="1-banner-button"></a> 
       </span> 
      <a style="display: inline;" title="Next" href="#" class="slideshow-br-controls-right"></a> 
     </div> 
    </div>      
</div>

以上HTML被动态地从DOT NET生成的，所以如果你现在看到的我有两个相同的一组HTML与不同的图像，它可以更多地根据有多少个FeaturedPromo控件被添加到页面中，仅在其上面两个。我有"Prev" $('.slideshow-br-controls-left')和"Next" $('.slideshow-br-controls-right')以及PREV和NEXT按钮之间的链接，它们将显示现在选择哪个图像。

现在我想写一个JQuery，它将显示下一个DIV，我的意思是隐藏当前并显示下一个div点击“Next”按钮以及“Prev”按钮。

请建议！

编辑：

下面是C＃代码生成上面的HTML：

int cntShow = 0; 

    foreach (FeaturedPromo promo in base.FeaturedPromos) 
    { 
     //Adding Input Hidden to get all the values from control 
     HtmlGenericControl inputHidden = new HtmlGenericControl("input"); 
     inputHidden.Attributes["type"] = "hidden"; 
     inputHidden.Attributes["src"] = promo.ImageSource; 
     inputHidden.Attributes["alt"] = promo.ImageAlt; 
     inputHidden.Attributes["title"] = promo.ImageTitle; 
     inputHidden.Attributes["href"] = promo.ImageHref; 
     inputHidden.Attributes["height"] = promo.ImageHeight; 
     inputHidden.Attributes["width"] = promo.ImageWidth; 
     inputHidden.Attributes["header"] = promo.ImageHeader; 
     inputHidden.Attributes["subheader"] = promo.ImageSubHeader; 
     inputHidden.Attributes["color"] = promo.ImageColor; 

     this.Controls.Add(inputHidden); 

     //Add specific div for Featured Promo 
     Panel div1 = new Panel(); 
     div1.Attributes["id"] = promo.ID; 

     if (cntShow == 0) 
     { 
      div1.Style["display"] = "block"; 
     } 
     else 
     { 
      div1.Style["display"] = "none"; 
     } 

     //Adding an Image 
     HtmlGenericControl image = new HtmlGenericControl("image"); 
     image.Attributes["src"] = promo.ImageSource; 
     image.Attributes["alt"] = promo.ImageAlt; 
     image.Attributes["title"] = promo.ImageTitle; 
     div1.Controls.Add(image); 

     //Adding two HREF for navigation 
     HtmlGenericControl alinkLeft = new HtmlGenericControl("a"); 
     alinkLeft.Attributes["class"] = "slideshow-control-left"; 
     alinkLeft.Attributes["href"] = "#"; 
     alinkLeft.Style["display"]="inline"; 
     div1.Controls.Add(alinkLeft); 

     HtmlGenericControl alinkRight = new HtmlGenericControl("a"); 
     alinkRight.Attributes["class"] = "slideshow-control-right"; 
     alinkRight.Attributes["href"] = "#"; 
     alinkRight.Style["display"] = "inline"; 
     div1.Controls.Add(alinkRight); 

     //Adding Second div 
     Panel div2 = new Panel(); 
     div2.CssClass = "slideshow-b"; 
     div1.Controls.Add(div2); 

     //Adding Third div 
     Panel div3 = new Panel(); 
     div3.CssClass = "slideshow-bl"; 
     div2.Controls.Add(div3); 

     //Adding the A HREF Link 
     HtmlGenericControl alink = new HtmlGenericControl("a"); 
     alink.Attributes["class"] = "slideshow-link"; 
     alink.Attributes["href"] = promo.ImageHref; 
     div3.Controls.Add(alink); 

     //Adding the first span     
     HtmlGenericControl span1 = new HtmlGenericControl("span"); 
     span1.Attributes["class"] = "slideshow-header"; 
     span1.InnerHtml = promo.ImageHeader; 
     alink.Controls.Add(span1); 

     //Adding line break 
     alink.Controls.Add(new LiteralControl("<br/>")); 

     //Adding the second span 
     HtmlGenericControl span2 = new HtmlGenericControl("span"); 
     span2.Attributes["class"] = "slideshow-subheader"; 
     span2.InnerHtml = promo.ImageSubHeader; 
     alink.Controls.Add(span2); 
     this.Controls.Add(div1); 

     if (base.FeaturedPromos.Count > 1) 
     { 
      //Adding DIV4 for prev and next 
      Panel div4 = new Panel(); 
      div4.CssClass = "slideshow-br"; 

      //Adding DIV5 inside DIV4 
      Panel div5 = new Panel(); 
      div5.CssClass = "slideshow-br-controls"; 
      div4.Controls.Add(div5); 

      //Adding the PREV A HREF Link 
      HtmlGenericControl alinkPrev = new HtmlGenericControl("a"); 
      alinkPrev.Attributes["class"] = "slideshow-br-controls-left"; 
      alinkPrev.Attributes["href"] = "#"; 
      alinkPrev.Attributes["title"] = "Prev"; 
      alinkPrev.Style["display"] = "inline"; 
      alinkPrev.Attributes["CurrentDivID"] = promo.ID;     
      div5.Controls.Add(alinkPrev); 

      //Adding the span for prev and next buttons 
      HtmlGenericControl span3 = new HtmlGenericControl("span"); 
      span3.Attributes["class"] = "slideshow-br-control-buttons"; 
      int count = 0; 
      foreach (FeaturedPromo allPromo in base.FeaturedPromos) 
      { 
       //Adding the All HREF Link for Prev and Next 
       HtmlGenericControl aLLlinks = new HtmlGenericControl("a"); 
       aLLlinks.Attributes["class"] = "" + count + "-banner-button"; 
       aLLlinks.Attributes["href"] = "#"; 
       aLLlinks.Attributes["title"] = allPromo.ImageTitle; 
       aLLlinks.Style["display"] = "inline"; 
       if (count == cntShow) 
       { 
        aLLlinks.Attributes["id"] = "active-banner-slide"; 
       } 
       span3.Controls.Add(aLLlinks); 
       count++; 
      } 

      div5.Controls.Add(span3); 

      //Adding the NEXT A HREF Link 
      HtmlGenericControl alinkNext = new HtmlGenericControl("a"); 
      alinkNext.Attributes["class"] = "slideshow-br-controls-right"; 
      alinkNext.Attributes["href"] = "#"; 
      alinkNext.Attributes["title"] = "Next"; 
      alinkNext.Style["display"] = "inline"; 
      alinkNext.Attributes["CurrentDivID"] = promo.ID; 
      div5.Controls.Add(alinkNext); 
      div2.Controls.Add(div4); 
     } 
     this.Controls.Add(div1); 
     cntShow++; 
    }

请建议是否有可能与后面的代码。

答

$('#FeaturedPromo1').hide(); 
$('#FeaturedPromo2').show();

这是你在找什么或我误解了你的问题？

后MKS的评论编辑：

取下div的下一个，上一个环节，增加他们只有一次：

<a onclick="Prev();">Prev</a><a onclick="Next();">Next</a> 
<script> 
var divNumber = 1; 

function Prev() 
{ 
    if(divNumber >1) 
    { 
     $('#FeaturedPromo' + divNumber).hide(); 
     $('#FeaturedPromo' + --divNumber).show(); 
    } 
} 
function Next() 
{ 

    if ($('#FeaturedPromo' + (divNumber + 1)).exists()) 
    { 
     $('#FeaturedPromo' + divNumber).hide(); 
     $('#FeaturedPromo' + ++divNumber).show(); 
    } 
} 
</script>

我没有测试，但是这就是这个想法。

如果你想做你的工作服务器端，发布你的代码生成div。

谢谢@Morsanu，我知道这可以做到，但我的下一个不知道哪个DIV被隐藏和显示，所以上面的解决方案不会工作 – 2011-02-02 09:49:32

答

如果这是幻灯片显示，我会怀疑，我建议使用完成的插件去做你正在尝试的东西。

看看这个，例如：

http://flowplayer.org/tools/scrollable/index.html

请问你做什么。 :)

希望帮助！

显示和隐藏使用JQuery

相关推荐