Question

我的目标是使用jquery创建导航菜单。当用户在left1上翻转时，右边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(); 
}); 
});

我的问题可能看起来有点偏，但我希望你能理解我的目标。感谢

Answer 1

这样的东西？

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

DEMO

Answer 2

这里有一些基本问题。

ID未定义。
您有一个名为rightFrame()的函数，但您不会在脚本中的任何位置调用它。
您应该使用类和$(this)来打开和关闭菜单项而不是ID。

这是一个小提示，向您展示一个简单的解决方法：http://jsfiddle.net/PFnDe/1/

编辑：我想我也应该在这里发布我的文章。

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
    });
});

Answer 3

以下是使用jquery执行此操作的方法：http://jsfiddle.net/surendraVsingh/h4wsS/6/

<强> Jquery的：

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

});

CSS： 删除了公开程度：隐藏＆amp;添加了display：none 。

.right{
   background:aqua; 
   height:270px;
   width:200px; 
   float:right; 
   display:none;
}

创建一个jquery翻转导航

3 个答案: