有人可以帮我弄清楚如何把正常的链接到这个JQuery的菜单？

所以我发现codrops有人可以帮我弄清楚如何把正常的链接到这个JQuery的菜单？

http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/

我已经想通了，大部分是我自己如何修改这个非常好的jQuery的菜单。其中大部分都是有道理的，但是我意识到，当我想将正常链接放入“boxcontent”部分时，我不知道。这个CSS有 -

.littleBoxes{ 
    width:350px; 
    height:350px; 
    margin:0 auto; 
    position:relative; 
} 
.littleBoxes > div{ 
    position:absolute; 
    width:90px; 
    height:90px; 
    text-align:center; 
    border:2px solid white; 
    overflow:hidden; 
    background-color:#f7f7f7; 
    -moz-box-shadow:0px 0px 3px #555; 
    -webkit-box-shadow:0px 0px 3px #555; 
    box-shadow:0px 0px 3px #555; 
    background-position:center center; 
    z-index:999; 
} 
.littleBoxes div a{ 
    text-transform:uppercase; 
    font-size: 18px; 
    font-weight:bold; 
    letter-spacing:-1px; 
    display:block; 
    line-height:90px; 
    text-decoration:none; 
    color:#fff; 
    background:#91EF4A url(../bgItem.png) repeat-x top left; 
    outline:none; 
    text-shadow:1px 1px 1px #888; 
    -moz-box-shadow:1px 1px 3px #777; 
    -webkit-box-shadow:1px 1px 3px #777; 
    box-shadow:1px 1px 3px #777; 
} 
.littleBoxes div.boxcontent{ 
    width:334px; 
    height:246px; 
    text-align:left; 
    padding:10px; 
    font-size:16px; 
    background-color:#f0f0f0; 
    border:2px solid #fff; 
    margin:10px 0px 0px 10px; 
    text-shadow:1px 1px 1px #fff; 
    -moz-box-shadow:1px 1px 3px #777; 
    -webkit-box-shadow:1px 1px 3px #777; 
    box-shadow:1px 1px 3px #777; 
    opacity:0.8; 
    display:none; 
}

我所做的任何链接都会有一个背景，并且会遵循脚本命令而不是转到网站。我查看了评论，并找到了解决方案，但是每次我做了这些评论，菜单都停止运行。

它说我必须添加一个类到框中的每个顶部链接元素。然后，我所要做的就是将此类添加到脚本内部的绑定函数中，如： $（'＃littleBoxes a.myClass'）。bind（'click'，function（e）{var> this = $（本）; 变量$ currentBox = $ this.parent（）;

我已经度过了周末，货架我的大脑，我碰到伪类，以为我会放一个特定的类每条链路，但主要这是我第一次在这里提出一个问题，我希望有人能够帮助我理解如何正确解决这个问题，而不是试图让正常的超链接链接到其他链接网站：P

对不起，新手问题。

以为我会添加网站

<html> 
<head> 
    <title>Little Boxes Menu with jQuery</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="description" content="Little Boxes Menu or Navigation with jQuery - 
radnomly animate the menu items to show content, accodion like boxes menu" /> 
    <meta name="keywords" content="jquery, boxes, menu, navigation, animate"/> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> 
    <style> 
     *{ 
      margin:0; 
      padding:0; 
     } 
     body{ 
      background:#E4FFCF url(on-music/wood.jpg) no-repeat top center; 
      font-family:Futura, "Century Gothic", AppleGothic, sans-serif; 
      overflow:hidden; 
     } 
     h1{ 
      color:#fff; 
      margin:40px 0px 20px 40px; 
      text-shadow:1px 1px 1px #555; 
      font-weight:normal; 
     } 
     a.back{ 
      position:absolute; 
      bottom:5px; 
      right:5px; 
     } 
     .reference{ 
      position:absolute; 
      bottom:5px; 
      left:5px; 
     } 
     .reference p a, a.back{ 
      text-transform:uppercase; 
      text-shadow:1px 1px 1px #fff; 
      color:#666; 
      text-decoration:none; 
      font-size:16px; 
      font-weight:bold; 
     } 
     .reference p a:hover, a.back:hover{ 
      color:#000; 
     } 
    </style> 
</head> 
<body> 
    <div class="title"> 
     <h1>Little Boxes Menu with jQuery</h1> 
    </div> 
    <div id="content"> 
     <div class="reference"> 
      <p><a href="http://www.flickr.com/photos/adforce1/">Photos from 
williamcho's photostream on Flickr</a></p> 
     </div> 

     <a class="back" href="http://tympanus.net/codrops/2010/05/18/little-boxes-menu- 
with-jquery">Back to Codrops</a> 
     <div id="littleBoxes" class="littleBoxes"> 
      <div class="boxlink bg1" style="top:0px;left:0px;"> 
       <a href="">About click me to see how far</a> 
       <div class="boxcontent"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna 
         aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
        </div> 
      </div> 
      <div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></ 
div> 
      <div class="bg5" style="background-position:-180px 
0;top:0px;left:190px;"></div> 
      <div class="bg5" style="background-position:-270px 
0;top:0px;left:285px;"></div> 
    </div> 
    <!-- The JavaScript --> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ 
jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.easing.1.3.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      /* object to save the initial positions of each box */ 
      var divinfo = {"initial": []}; 
      /* index of the selected/clicked box */ 
      var current = -1; 

      /* we save the index,top and left of each one of the boxes */ 
      $('#littleBoxes > div').each(function(){ 
       var $this = $(this); 
       var initial = { 
          'index' : $this.index(), 
          'top'  : $this.css('top'), 
          'left'  : $this.css('left') 
       }; 
       divinfo.initial.push(initial); 
      }); 

      /* clcik event for the anchors inside of the boxes */ 
      $('#littleBoxes a').bind('click',function(e){ 
        var $this   = $(this); 
        var $currentBox = $this.parent(); 
        /* set a z-index lower than all the other boxes, 
        to see the other boxes animation on the top*/ 
        $currentBox.css('z-index','1'); 

        /* if we are clicking on a expanded box : */ 
        if(current == $currentBox.index()){ 
         /* put it back (decrease width,height, and set the top and 
left like it was before). 
         the previous positions are saved in the divinfo obj*/ 
         $currentBox.stop().animate({ 
           'top'   : divinfo.initial[$currentBox.inde 
()].top, 
           'left'  : divinfo.initial[$currentBox.inde 
()].left, 
           'width'  : '90px', 
           'height' : '90px' 
         },800,'easeOutBack').find('.boxcontent').fadeOut(); 


         $('#littleBoxes > div').not($currentBox).each(function(){ 
          var $ele   = $(this); 
          var elemTop  = divinfo.initial[$ele.index()].top; 
          var elemLeft  = divinfo.initial[$ele.index()].left; 
          $ele.stop().show().animate({ 
           'top'   : elemTop, 
           'left'  : elemLeft, 
           'opacity' : 1 
          },800); 
         }); 
         current = -1; 
        } 
        /* if we are clicking on a small box : */ 
        else{ 
         /* randomly animate all the other boxes. 
         Math.floor(Math.random()*601) - 150 gives a random number 
between -150 and 450. 
         This range is considering the initial lefts/tops of the 
elements. It's not the exact right 
         range, since we would have to calculate the range based on 
each one of the boxes. Anyway, it 
         fits our needs... 
         */ 
         $('#littleBoxes > div').not($currentBox).each(function(){ 
          var $ele = $(this); 
          $ele.stop().animate({ 
           'top' : (Math.floor(Math.random()*601) - 150) +'px', 
           'left': (Math.floor(Math.random()*601) - 150) +'px', 
           'opacity':0 
          },800,function(){ 
           $(this).hide(); 
          }); 
         }); 

         /* expand the clicked one. Also, fadeIn the content(boxcontent) 
         if you want it to fill the space of the littleBoxes container, 
         then these are the right values */ 
         var newwidth  = 379; 
         var newheight  = 379; 
         $currentBox.stop().animate({ 
          'top'  : '0px', 
          'left' : '0px', 
          'width' : newwidth +'px', 
          'height': newheight+'px' 
         },800,'easeOutBack',function(){ 
          current = $currentBox.index(); 
          $(this).find('.boxcontent').fadeIn(); 
         }); 


        } 
        e.preventDefault(); 
      }); 
     }); 
    </script> 
</body> 
</html>

来源

2013-03-13 Magee

$('a').each(function() { 
    var a = new RegExp('/' + window.location.host + '/'); 
    if(!a.test(this.href)) { 
     $(this).click(function(event) { 
      event.preventDefault(); 
      event.stopPropagation(); 
      window.open(this.href, '_self'); 
     }); 
    } 
});

这似乎更平滑。

来源

2013-03-17 02:19:49 Magee

一般小部分，我认为这个问题是该位

e.preventDefault();

这从下面的链接将停止浏览器。

如果删除它，链接将正常工作，但您可能会强制浏览器刷新并且不会生成动画。我无法尝试此操作，但在阻止其工作之前，您需要检查它是否不是外部链接。

你需要这样的替代

if(e.href != e.baseURI) { e.preventDefault(); }

来源

2013-03-13 23:37:02 digitalBath

你好。谢谢您的回复。我继续前进，尝试一下，但正如你所说，盒子不想动画。 current = $ currentBox.index（）; $（this）.find（'。boxcontent'）。fadeIn（）; }）; } if（e.href！= e.baseURI）{e.preventDefault（）;} }）; – Magee 2013-03-13 23:52:44

我试过联系店主，但我还没有听到任何东西。它真的很奇怪。如果我把一个正常的超链接放到网站上，由于CSS，它会获得一个边框。我想我需要做一个新课，但如果我去绑定它，它会停止动画。我必须在CSS中写一些不正确的东西。我只是希望我知道什么。我从字面上尝试了很多不同的“myClass”变体。 – Magee 2013-03-14 03:49:48

OK什么的！我已经知道了。

变化

$('#littleBoxes > div').each(function(){

到

$('#littleBoxes > div','myClass').each(function(){

对于面向DIV的CSS添加此

$('myClass').removeClass('#littleBoxes a').addClass('#myClass a');

的CSS改为

.myClass div a{ 
text-transform: none; 
font-size: 16px; 
font-weight: normal; 
letter-spacing: normal; 
display: inline; 
line-height: normal; 
text-decoration: underline; 
color:#000000; 
background: none; 
outline: none; 
text-shadow: none; 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
}

它的工作原理：D！

来源

2013-03-16 10:56:48 Magee

<a href="#" onclick="javascript: location = 'http://www.google.com';" >Google</a>

这是工作:)另一个代码不工作！

来源

2013-08-25 21:18:14 yuci81

有人可以帮我弄清楚如何把正常的链接到这个JQuery的菜单？

回答

相关问题