1

所以我在 codrops 上发现了这个非常棒的 jQuery 菜单

http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-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 = $(this ); var $currentBox = $this.parent();

我整个周末都在绞尽脑汁，遇到了伪类，并认为我会为每个链接放置一个特定的类，但主要的 CSS 用它的特性覆盖了它。

这是我第一次在这里提出问题，我希望有人可以帮助我了解如何正确解决这个问题。试图制作链接到其他网站的正常超链接时，我已经筋疲力尽了。: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>
4

4 回答 4

0

我认为问题出在这一点

e.preventDefault();

这会阻止浏览器跟踪该链接。

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

你需要这样的东西

if(e.href != e.baseURI) { e.preventDefault(); }
于 2013-03-13T23:37:02.220 回答
0 
$('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-17T02:19:49.643 回答
0 
<a href="#" onclick="javascript: location = 'http://www.google.com';" >Google</a>

那行得通:) 另一个代码不起作用！

于 2013-08-25T21:18:14.350 回答
0

好的！我已经想通了。

改变

$('#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-16T10:56:48.503 回答