1

我正在开发我的新网站，并且有一个砖石/Pinterest 风格效果博客板。当您将鼠标悬停在帖子上时，它会弹出一个按钮，该按钮应链接到博客/单个页面。如果您右键单击并在新窗口中打开它会执行此操作，但如果您只是左键单击则不会。

我猜这与我用来为砌体风格提供动力的javascript有关。

测试站点在这里：http: //zonocreative.co.uk/lee/blog.html

如果有人可以提供帮助，那就太好了。

问候

作为参考，这是我的html代码：

<!DOCTYPE html>
<html>
<head>

<title>Lee Bollu - Creative Designer Leigh-on-Sea, Essex</title>

<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/columns.css">
<link rel="stylesheet" type="text/css" href="css/flexy-menu.css">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>

<!--Header-->

    <div class="nav-wrapper">

        <div class="nav-inner">

            <a href="index.html"><img class="logo" src="images/lee-bollu-logo.svg" alt="Lee Bollu Logo"></a>

            <a href="http://www.facebook.com/lee.bollu"><img class="social" src="images/facebook.svg" alt="facebook"></a>
            <a href="http://www.twitter.com/lbollu"><img class="social" src="images/twitter.svg" alt="twitter"></a>

            <ul class="flexy-menu">
                <li><a href="index.html">Work</a></li>
                <li><a href="blog.html">Blog</a></li>
            </ul>

        </div>
    </div>

<!--Header-->

<!--Recent Blog Posts-->

    <div class="container">
        <div class="container-fluid social-wrapper">
      <div id="social-container"></div>

      <div id="hidden-items">

        <!-- start of an item-->
        <div class="item panel clearfix social-entry">
          <div class="panel-body">
            <div class="content-image">
              <img height="300" src="images/workitem.jpg">

                <div class="social-blog">
                    <span>
                        <a href="single.html">VIEW POST</a>
                    </span>
                </div>

            </div>
            <div class="doing-intro">
                <h4>Post One</h4>
                <p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
                <h5><a href="#">Design</a>, <a href="#">Web</a> &#160;&#160;|&#160;&#160; 2nd July 2014</h5>
            </div>
          </div>
        </div>
        <!-- end of an item-->

        <!-- start of an item-->
        <div class="item panel clearfix social-entry">
          <div class="panel-body">
            <div class="content-image">
              <img height="700" src="images/workitem.jpg">

                <div class="social-blog">
                    <span>
                        <a href="single.html">VIEW POST</a>
                    </span>
                </div>

            </div>
            <div class="doing-intro">
                <h4>Post One</h4>
                <p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
                <h5><a href="#">Design</a>, <a href="#">Web</a> &#160;&#160;|&#160;&#160; 2nd July 2014</h5>
            </div>
          </div>
        </div>
        <!-- end of an item-->

        <!-- start of an item-->
        <div class="item panel clearfix social-entry">
          <div class="panel-body">
            <div class="content-image">
              <img height="200" src="images/workitem.jpg">

                <div class="social-blog">
                    <span>
                        <a href="single.html">VIEW POST</a>
                    </span>
                </div>

            </div>
            <div class="doing-intro">
                <h4>Post One</h4>
                <p> Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
                <h5><a href="#">Design</a>, <a href="#">Web</a> &#160;&#160;|&#160;&#160; 2nd July 2014</h5>
            </div>
          </div>
        </div>
        <!-- end of an item-->

        <!-- start of an item-->
        <div class="item panel clearfix social-entry">
          <div class="panel-body">
            <div class="content-image">
              <img height="200" src="images/workitem.jpg">

                <div class="social-blog">
                    <span>
                        <a href="single.html">VIEW POST</a>
                    </span>
                </div>

            </div>
            <div class="doing-intro">
                <h4>Post One</h4>
                <p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
                <h5><a href="#">Design</a>, <a href="#">Web</a> &#160;&#160;|&#160;&#160; 2nd July 2014</h5>
            </div>
          </div>
        </div>
        <!-- end of an item-->

        <!-- start of an item-->
        <div class="item panel clearfix social-entry">
          <div class="panel-body">
            <div class="content-image">
              <img height="180" src="images/workitem.jpg">

                <div class="social-blog">
                    <span>
                        <a href="single.html">VIEW POST</a>
                    </span>
                </div>

            </div>
            <div class="doing-intro">
                <h4>Post One</h4>
                <p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
                <h5><a href="#">Design</a>, <a href="#">Web</a> &#160;&#160;|&#160;&#160; 2nd July 2014</h5>
            </div>
          </div>
        </div>
        <!-- end of an item-->

      </div>
    </div>
    </div>

<!--Contact Info-->
    <div class="lightgrey-wrapper">
        <div class="container">

            <div class="contact-wrapper">
                <div class="contact-option">
                    <img class="contact-image" src="images/phone.svg" alt="Lee Bollu Creative Designer Contact">
                    <h4>Phone</h4>
                    <p>07769 338 649</p>
                </div>
                <div class="contact-option">
                    <img class="contact-image" src="images/computer.svg" alt="Lee Bollu Creative Designer Computer">
                    <h4>Email</h4>
                    <p>hello@leebollu.co.uk</p>
                </div>
            </div>

        </div>
    </div>
<!--Contact Info-->

<!--base-->
    <div class="base-wrapper">
        <div class="container">
            <div class="section group">

                <div class="col span_12_of_12">
                    <p>&copy; 2014 Lee Bollu</p>

                    <a href=""><img class="base-social" src="images/foot-in.svg" alt=""></a>
                    <a href=""><img class="base-social" src="images/foot-drib.svg" alt=""></a>
                    <a href=""><img class="base-social" src="images/foot-fb.svg" alt=""></a>
                    <a href=""><img class="base-social" src="images/foot-twit.svg" alt=""></a>

                </div>
        </div>
    </div>
<!--base-->


        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/flexy-menu.js"></script>
        <script>
            $(document).ready(function(){
                $(".panel a").click(function(e){
                    e.preventDefault();
                    var style = $(this).attr("class");
                    var menustyle = $(".flexy-menu").attr("class");
                    if(menustyle.indexOf("light") > -1){
                        $(".flexy-menu").removeAttr("class").addClass("flexy-menu light").addClass(style);
                    }
                    else{
                        $(".flexy-menu").removeAttr("class").addClass("flexy-menu").addClass(style);
                    }
                });
            });

            $(document).ready(function(){  
                $(".flexy-menu").flexymenu({
                    speed: 400,
                    type: "horizontal",
                    align: "left",
                    indicator: false
                });
            });
        </script>
        <script src="https://cdn.jsdelivr.net/isotope/2.0.0/isotope.pkgd.min.js"></script>
    <script src="js/blog-feed.js"></script>
</body>
</html>

李

4

2 回答 2

1

你需要e.preventDefault();删除$(".panel a").click();

        $(document).ready(function(){
            $(".panel a").click(function(e){
                e.preventDefault();
                var style = $(this).attr("class");
                var menustyle = $(".flexy-menu").attr("class");
                if(menustyle.indexOf("light") > -1){
                    $(".flexy-menu").removeAttr("class").addClass("flexy-menu light").addClass(style);
                }
                else{
                    $(".flexy-menu").removeAttr("class").addClass("flexy-menu").addClass(style);
                }
            });
        });
于 2014-07-29T20:39:28.333 回答
0

这是你的问题：

$(document).ready(function(){
    $(".panel a").click(function(e){
        e.preventDefault();
        var style = $(this).attr("class");
        var menustyle = $(".flexy-menu").attr("class");
        if(menustyle.indexOf("light") > -1){
            $(".flexy-menu").removeAttr("class").addClass("flexy-menu light").addClass(style);
        }
        else{
            $(".flexy-menu").removeAttr("class").addClass("flexy-menu").addClass(style);
        }
    });
});

这是捕获“.panel a”中的所有链接并阻止默认行为。

于 2014-07-29T20:38:59.943 回答