Question

我正在使用我的新网站并拥有一个砖石/ 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>

利

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

Answer 2

这是你的问题：

$(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);
        }
    });
});

这是捕获＆＃34; .panel a＆＃34;中的所有链接。并防止默认行为。

无法单击锚链接

2 个答案: