0

这是示例：http ://ashleybest.co.uk/mottie_is_the_best/index.html

我想要做的是将幻灯片“一”上的链接（“Aaaa”、“Bbbb”等）设置为与当前幻灯片上控制主滑块的外部链接相同。幻灯片“一”上的链接控制右侧的第二个滑块。

这怎么可能？

这是css的外观：

.link-1.current, .link-1:hover { text-decoration:underline; color:#BAA5EC; }
.link-2.current, .link-2:hover { text-decoration:underline; color:#BAA5EC; }
.link-3.current, .link-3:hover { text-decoration:underline; color:#BAA5EC; }
.link-4.current, .link-4:hover { text-decoration:underline; color:#BAA5EC; }
.link-a.current, .link-a:hover { text-decoration:underline; color:#BAA5EC; }
.link-b.current, .link-b:hover { text-decoration:underline; color:#BAA5EC; }
.link-c.current, .link-c:hover { text-decoration:underline; color:#BAA5EC; }
.link-d.current, .link-d:hover { text-decoration:underline; color:#BAA5EC; }
4

1 回答 1

2

带有解决方案的演示

HTML

<table>
<tbody>
<tr>
  <td id="sliderbg" valign="bottom">
    <div class="nav1">
      <a class="nav link-1" href="#1"><span>One</span></a>
      <a class="nav link-2" href="#2"><span>Two</span></a>
      <a class="nav link-3" href="#3"><span>Three</span></a>
      <a class="nav link-4" href="#4"><span>Four</span></a>
    </div>
    <ul class="slider1">
      <li>
        <div class="nav2">
          One:
          <a class="nav link-a" href="#2">Aaaa</a> |
          <a class="nav link-b" href="#3">Bbbb</a> |
          <a class="nav link-c" href="#4">Cccc</a> |
          <a class="nav link-d" href="#5">Dddd</a>
        </div>
      </li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
    </ul>
  </td>
  <td id="sliderbg" valign="bottom">
    <ul class="slider2">
      <li>Select an item on the left to view here</li>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
  </td>
</tr>
</tbody>
</table>

CSS

.slider1, .slider2, .slider1 li, .slider2 li {
  width: 300px;
  height: 200px;
  list-style: none;
}

#sliderbg {
  background-color: #444;
  color: #ddd;
}

.nav { text-decoration:none; color:#fff; }
.nav.current, .nav:hover { text-decoration:underline; color:#BAA5EC; }

​ 脚本

$(function() {
  $('.slider1').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
      $('.nav1').find('a').eq(slider.currentPage - 1).addClass('current');
    },
    onSlideInit: function(e, slider) {
      $('.nav1').find('a').removeClass('current').eq(slider.targetPage - 1).addClass('current');
    },
  });
  // set up external links
  $('.nav1 a').click(function() {
    var slide = $(this).attr('href').substring(1);
    $('.slider1').anythingSlider(slide);
    return false;
  });

  $('.slider2').anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    onInitialized: function(e, slider) {
      $('.nav2').find('a').eq(slider.currentPage - 1).addClass('current');
    },
    onSlideInit: function(e, slider) {
      $('.nav2').find('a').removeClass('current')
      // subtract 2 because we don't have a link to the first slide
      .eq(slider.targetPage - 2).addClass('current');
    },
  });
  // set up external links
  $('.nav2 a').click(function() {
    var slide = $(this).attr('href').substring(1);
    $('.slider2').anythingSlider(slide);
    return false;
  });
});​
于 2012-02-11T00:08:06.570 回答