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

私が作成したリンクには背景があり、Webサイトにアクセスする代わりにスクリプトコマンドに従います。コメントを見て解決策がありましたが、毎回メニューが機能しなくなりました。

ボックス内の各トップリンク要素にクラスを追加する必要があると言われました。次に、このクラスをスクリプト内のバインド関数に追加するだけです。たとえば、$（'＃littleBoxes a.myClass'）。bind（'click'、function（e）{var $ this = $（this ）; var $ currentBox = $ this.parent（）;

私は週末を頭を悩ませて過ごし、疑似クラスに出くわし、リンクごとに特定のクラスを配置すると思いましたが、メインのCSSはその機能でそれをオーバーライドします。

ここに質問をするのはこれが初めてであり、誰かがこれに適切に取り組む方法を理解するのを手伝ってくれることを願っています。他のウェブサイトにリンクする通常のハイパーリンクを作成しようとすると、燃え尽き症候群になります。：P

newbishの質問でごめんなさい。

サイトの一般的な小さな部分を追加すると思いました

<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

わかった！私はそれを理解しました。

変化する

$('#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 に答える
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 に答える