通过选项卡可以访问Cycle 2幻灯片

Question

为了使网站更加用户友好，我试图通过标签访问我的幻灯片。

这是HTML，但是当我选中它时，没有任何元素被突出显示。

<div id="bg-header">
      <div id="bg-wrap">
        <div class="cycle">
          <div class="cycle-bullet-container"><span class="">•</span><span class="cycle-pager-active">•</span><span class="">•</span><span class="">•</span><span class="">•</span></div>
          <div id="cycle-next" class="cycle-button-a" style="width: 41px;"><div class="cbutton-wrapper"><a href="#"></a></div></div>
          <div id="cycle-prev" class="cycle-button-a cba-a" style="width: 41px;"><div class="cbutton-wrapper"><a href="#"></a></div></div>
          <div id="shuffle" class="cycle-slideshow" data-cycle-timeout="5000" style="position: relative; overflow: hidden;" data-cycle-fx="scrollHorz" data-cycle-slides="> a" data-cycle-pager=".cycle-bullet-container" data-cycle-prev="#cycle-prev" data-cycle-next="#cycle-next"><a href="#" class="slideImg slider1 cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden; background-position: 50% 50%;">Testimonials</a>


          <a href="#" class="slideImg slider1 cycle-slide" style="position: absolute; top: 0px; left: -1057.17358419256px; z-index: 100; opacity: 1; display: block; visibility: visible; background-position: 50% 50%;">Testimonials</a><a href="#" class="slideImg slider2 cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 222.826415807438px; z-index: 99; visibility: visible; opacity: 1; display: block; background-position: 50% 50%;">Testimonials</a><a href="#" class="slideImg slider3 cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 1; display: block; background-position: 50% 50%;">Testimonials</a><a href="#" class="slideImg slider4 cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block; background-position: 50% 50%;">Testimonials</a><a href="#" class="slideImg slider5 cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 1; display: block; background-position: 50% 50%;">Testimonials</a></div>
        </div>
      </div>
    </div>

Unrendered Code：

<style TYPE="text/css">
  #bg {
  background: url(<%= Settings.image_url %>) 50% 0% no-repeat;
  }
  .slider1 {
  background: url(<%= Settings.slider_url('one') %>);
  }
  .slider2 {
  background: url(<%= Settings.slider_url('two') %>);
  }
  .slider3 {
  background: url(<%= Settings.slider_url('three') %>);
  }
  .slider4 {
  background: url(<%= Settings.slider_url('four') %>);
  }
  .slider5 {
  background: url(<%= Settings.slider_url('five') %>);
  }
  </style>

    <div id="bg-header">
      <div id="bg-wrap">
        <% if not current_page?('/') || current_page?('/login') %>
        <div id="bg">
        </div>
        <% else %>
        <div class="cycle" >
          <div class="cycle-bullet-container"></div>
          <div id="cycle-next" class="cycle-button-a" style="width: 41px;"><div class="cbutton-wrapper"><a href=#></a></div></div>
          <div id="cycle-prev" class="cycle-button-a cba-a" style="width: 41px;"><div class="cbutton-wrapper"><a href=#></a></div></div>
          <div id="shuffle" class="cycle-slideshow" data-cycle-timeout="<%= @settings.cycle_time %>" style="position:relative; overflow: hidden;" data-cycle-fx="scrollHorz" data-cycle-slides="> a" data-cycle-pager=".cycle-bullet-container" data-cycle-prev="#cycle-prev" data-cycle-next="#cycle-next">


     <a href="#" class="slideImg slider1" style="background-position:center;">Testimonials</a>
<a href="#" class="slideImg slider2" style="background-position:center;">Testimonials</a>
<a href="#" class="slideImg slider3" style="background-position:center;">Testimonials</a>
<a href="#" class="slideImg slider4" style="background-position:center;">Testimonials</a>
<a href="#" class="slideImg slider5" style="background-position:center;">Testimonials</a>


          </div>
        </div>
        <% end %>
      </div>
    </div>

Render Slider（这是rails代码上的ruby）：

  def render_slider
    links = links_for_slider.enum_for(:each_with_index).collect do |links|
      links
    end
    links.join.html_safe
  end

  def links_for_slider
    links = []
    (1..5).each do |i|
      links << link_to(t("navigation.testimonials"), path_to_testimonial(i) , {:style =>"background-position:center;", :class=>"slideImg slider#{i}" } )
    end
    links
  end