20

これは 2 番目に単純なロールオーバー効果ですが、簡単な解決策はまだ見つかりません。

募集:アイテムのリストと、対応するスライド (DIV) のリストがあります。読み込み後、最初のリスト項目が選択され (太字)、最初のスライドが表示されます。ユーザーが別のリスト項目にカーソルを合わせると、代わりにそのリスト項目が選択され、対応するスライドが表示されます。

次のコードは機能しますが、ひどいものです。この動作をエレガントな方法で取得するにはどうすればよいですか? jquery にはアニメーション化された複雑なロールオーバー効果が多数ありますが、私はこの効果のきれいな方法を思いつきませんでした。

<script type="text/javascript">
function switchTo(id) {
    document.getElementById('slide1').style.display=(id==1)?'block':'none';
    document.getElementById('slide2').style.display=(id==2)?'block':'none';
    document.getElementById('slide3').style.display=(id==3)?'block':'none';
    document.getElementById('slide4').style.display=(id==4)?'block':'none';
    document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
    document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
    document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
    document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>

<ul id="switches">
  <li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
  <li id="switch2" onmouseover="switchTo(2);">Second slide</li>
  <li id="switch3" onmouseover="switchTo(3);">Third slide</li>
  <li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
4

5 に答える 5

19

JS がオフのときにすべてのスライドを表示するのではなく (ページ レイアウトが壊れる可能性があります)、スイッチ内に LI を配置します。適切なスイッチに事前設定された「アクティブな」クラスを持つページを返すサーバー側コードへの実際の A リンクを配置します。 /滑り台。

$(document).ready(function() {
  switches = $('#switches > li');
  slides = $('#slides > div');
  switches.each(function(idx) {
    $(this).data('slide', slides.eq(idx));
  }).hover(
    function() {
      switches.removeClass('active');
      slides.removeClass('active');
      $(this).addClass('active');
      $(this).data('slide').addClass('active');
    });
});
#switches .active {
  font-weight: bold;
}
#slides div {
  display: none;
}
#slides div.active {
  display: block;
}
<html>

<head>

  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="switch.js"></script>

</head>

<body>

  <ul id="switches">
    <li class="active">First slide</li>
    <li>Second slide</li>
    <li>Third slide</li>
    <li>Fourth slide</li>
  </ul>
  <div id="slides">
    <div class="active">Well well.</div>
    <div>Oh no!</div>
    <div>You again?</div>
    <div>I'm gone!</div>
  </div>

</body>

</html>

于 2008-08-29T16:49:56.673 に答える
6

これが私のライト マークアップ jQuery バージョンです。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
  $('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
  $('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
  $('#switches li').mouseover(function(event){
    switchTo($('#switches li').index(event.target));
  });
  switchTo(0);
});
</script>
<ul id="switches">
  <li>First slide</li>
  <li>Second slide</li>
  <li>Third slide</li>
  <li>Fourth slide</li>
</ul>
<div id="slides">
  <div>Well well.</div>
  <div>Oh no!</div>
  <div>You again?</div>
  <div>I'm gone!</div>
</div>

これには、ユーザーが JavaScript をオフにしており、HTML マークアップをほとんど使用せず、JavaScript がかなり読みやすい場合に、すべてのスライドを表示できるという利点があります。この関数は、アクティブにする/ペアswitchToのインデックス番号を受け取り、関連するすべての要素をデフォルトのスタイル (リスト項目の場合、DIV の場合は太字ではない) にリセットし、必要なandをおよびに設定します。クライアントで JavaScript が有効になっている限り、機能は元の例とまったく同じになります。<li><div>display:nonelist-itemdivbolddisplay

于 2008-08-29T16:53:06.667 に答える
5

jQuery のバージョンは次のとおりです。

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#switches li").mouseover(function () {
        var $this = $(this);
        $("#slides div").hide();
        $("#slide" + $this.attr("id").replace(/switch/, "")).show();
        $("#switches li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});
</script>

<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
于 2008-08-29T16:21:23.857 に答える
2 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(
  function(){
    $( '#switches li' ).mouseover(
      function(){
        $( "#slides div" ).hide();
        $( '#switches li' ).css( 'font-weight', 'normal' );
        $( this ).css( 'font-weight', 'bold' );
        $( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
      }
    );
  }
);

</script>
</head>
<body>
<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>
于 2008-08-29T16:30:30.620 に答える
0

このコードの (少なくとも私にとっての) 唯一の問題は、すべての要素を処理するためにループを使用していないことです。それ以外に、なぜそのようにしないのですか？

ループとは、JQuery を介してコンテナー要素を取得し、すべての子要素を反復処理することを意味します。つまり、基本的にワンライナーです。

于 2008-08-29T16:08:41.047 に答える