0

私の目的は、jquery を使用してナビゲーション メニューを作成することです。ユーザーが left1 にロールオーバーすると、right 1 が表示されます。これをjqueryでコーディングしようとしていますが、少し縛られています。手伝ってください

CSS

.left {
background: #fff;
padding: 10px;
width: 200px;
border: 1px solid #ccc; 
position:relative

}
.right{
background:aqua; 
 height:270px;
width:200px; 
float:right; 
visibility:hidden

}

html

 <div class="left" id="left1">left 1</div>
 <div class="left" id="left2">left 2</div>
 <div class="left" id="left3">left 3</div>
 <div class="left" id="left4">left 4</div>

<div class="right" id="r1">right 1</div>
<div class="right" id="r2">right 2</div>
<div class="right" id="r3">right 3</div>
<div class="right" id="r4">right 4</div>

jquery

$(document).ready(function(){ 
function rightFrame(){
$('#r1').css({
        'position':'absolute',
        'top':'40px',
        'left':'300px',
        'visibility':'visible'  
        }); 
$('#r1').show();

}
$('#left1').mouseover(function(e){ 
 $("#left"+ID).css('background','red'); 
}); 
$('.left').mouseout(function(e){ 
$('.right').hide(); 
}); 
});

私の質問は少しずれているように見えるかもしれませんが、私の意図を理解していただければ幸いです。ありがとう

4

3 に答える 3

2

このようなもの？

$(".left").hover(function() {
    var id = $(this).attr('id').match(/\d+$/);
    $("#r" + id).css({'visibility':'visible'});
}, function() {
    $(".right").css({'visibility':'hidden'});
});​

デモ

于 2012-06-28T17:42:12.313 に答える
1

ここにはいくつかの根本的な問題があります。

  1. IDは未定義です。
  2. 名前の付いた関数rightFrame()がありますが、スクリプトのどこにも呼び出していません。
  3. IDの代わりに、クラスと$(this)メニュー項目を開いたり閉じたりする必要があります。

簡単な修正方法を示すフィドルは次のとおりです。http：//jsfiddle.net/PFnDe/1/

編集：私はここにも私のJSを投稿する必要があると思います。

function rightFrame(e) { // Moved this outside of DOM ready function.
    $('#' + e).css({
        'position': 'absolute',
        'top': '40px',
        'left': '300px',
        'visibility': 'visible'
    });
    $('#' + e).show();
}

$(document).ready(function() {
    $('.left ').mouseover(function(e) {
        rightFrame($(this).data('item')); // Added this
        $(this).css('background-color', 'red');
    });
    $('.left ').mouseout(function(e) {
        $('.right ').hide();
        $(this).css('background-color', '#fff'); // Added this
    });
});
于 2012-06-28T17:43:54.997 に答える
0

jqueryでこれを行う方法は次のとおりです。http：//jsfiddle.net/surendraVsingh/h4wsS/6/

Jquery：

$('.left').hover(function(){
  var x = ($(".left").index(this))+1;
  var rx = '#r'+x;
  $(rx).toggle();

});​

CSS： 可視性を削除：非表示＆表示を追加：なし。

.right{
   background:aqua; 
   height:270px;
   width:200px; 
   float:right; 
   display:none;
}​
于 2012-06-28T18:49:39.937 に答える