有人可以幫我弄清楚如何把正常的鏈接到這個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的菜單？

回答

相關問題