javascript - 无法点击 anchor 链接-6ren

javascript - 无法点击 anchor 链接

转载作者：行者123 更新时间：2023-11-28 01:06:25

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

我猜测这与我用来支持 masonry 风格的 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>

李

最佳答案

您需要删除 $(".panel a").click(); 中的 e.preventDefault();

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

关于javascript - 无法点击 anchor 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25024464/

文章推荐： html - 悬停时具有边框高度的颜色子元素

文章推荐： javascript - 类型错误 : Cannot read property 'slice' of undefined

文章推荐： javascript - 从Google Earth插件中的kmlObject获取kml字符串

文章推荐： javascript - .progress 没有看到 .error 中更新的范围值

javascript - 点击 child 不会触发 parent 点击
当点击content 时，我想触发我的alert。我的 content 中可以有任意数量的子元素，所以我不想对每个元素都进行硬编码。我想也许我可以监听对该父元素的点击，然后每次点击子元素都会触发我的操
objective-c - 检测 Cocoa 应用程序中的用户事件(点击、点击……)
对于 Mac 应用程序，我想检测应用程序中的用户事件，因此我可以定期让 Web 服务知道用户在端点上仍然处于事件状态。在 Cocoa Touch 中，我会覆盖 UIApplication 的 sen
Javascript-点击
第一次在这里发帖，但天知道我一直使用这个网站来搜索问题 :P 好吧，我现在遇到了自己的问题，我似乎无法轻松地在 Google 上搜索，在玩了大约 2 小时后，我终于决定发布一个问题，看看你们是怎么想的
AngularJS 点击 TouchStart
Angular 触控 ngTouch导致在触摸释放时发生点击。有没有办法让点击发生在触摸开始？ fast-click下面的指令似乎可以在触摸屏上执行我想要的操作，但它不适用于鼠标点击。 myApp.
Flutter - 点击/触摸区域如何工作？
1) 如果我有这个，当我点击子 Container 时它不会打印'tap': Container( color: Colors.red, child: GestureDetector(
jquery解除绑定(bind)点击
我简直要发疯了，只是想从 jQuery 中的事件中解除 onclick 处理程序的绑定(bind)，以便稍后可以将其绑定(bind)到另一个函数。我已将代码隔离在测试页中，因此除了核心之外什么都没有
jquery - 如何在jquery中触发Live()点击
我有一个有趣的情况。我需要触发实时点击，因为简单的点击不起作用。这就是我所拥有的: $('.text').trigger('click'); 但我需要这样的东西: $('.text').trigge
javascript - 点击 'Confirm'后没有出现警告窗口
这是我的作业，这是我第一次做表单验证。以下代码分别是我的HTML代码和JavaScript代码。 HTML 代码: First N
magento - 如何获取特定产品的浏览/点击
正如标题所示，如何获取 Magento 中特定产品的浏览量/点击量/展示次数。欢迎任何帮助。最佳答案这个简单的示例将为您提供在您指定的日期+其查看次数之间查看过的产品列表: $fromDate =
java - fragment 点击
我正在创建一个应用程序，但在其中遇到错误。我想在按钮上添加 OnclickListner。该按钮位于 fragment 类上。从这个 fragment 类我想继续另一个类。代码如下: fragment
点击 PHP "continue"
我在数组中有一些值。首先，我想在 View 中显示该数组的前两个值，接下来我想在某些按钮单击操作后显示剩余的值，并将数组索引增加 1。例如:一次点击显示第三个值，然后另一次点击显示第四个值。我怎样才
jquery - 如何查看CMD+点击
在下面的代码片段中，如果在链接上执行“CMD+CLICK”，则不会显示 alert('CMD')。这是为什么？我想在用户按下 CMD 按钮(或 Windows 上的 CTRL 键)+单击 href
javascript - 点击()开始加载
我希望在单击链接时开始加载一些内容。在单击该链接之前，我不希望它使用任何带宽。另外如何实现几乎所有灯箱中都能看到的旋转光标动画？最佳答案使用$.ajax()函数动态加载内容。对于动画，请找到一个
javascript - 点击 'a'打开两个链接
我有如下的 DOM: users 当用户点击按钮时，它会将新的“td”附加到“tr”。它运作良好。问题:单击“a”我想打开两个链接。最好的方法是首先将当前页面重定向到另一个页面，然后
javascript - 显示数组项一次(点击)
这是我正在尝试做的.. 点击按钮会显示一个随机数组项。数组项只能显示一次。目前我已经将代码设置为: 点击随机数组项显示。按钮点击继续循环，没有结束。按钮点击多次显示元素。这是代码的链接 ht
C# 编程鼠标移动/点击
我想创建...基本上是一个宏程序。点击记录后，它会记录所有鼠标(可能最终是键盘)事件。然后你可以保存，然后播放，鼠标应该移动并点击在相同的地方当你录制它时它会发生。我知道如何获取全局鼠标事件，但我不
android - ListView 点击？
我有一个关于将 onClick 添加到 ListView 的问题，我已经尝试尽可能多地遵循 Android NotePad 教程，但是对于我的布局我不太明白如何添加它。这是 Activity 类，它
javascript - 点击/点击不适用于触摸屏
我正在使用一个网站以表格的形式显示信息。用户可以单击表格中的行来更改它们的颜色，我还有一个按钮允许用户暂停页面的刷新，这样就不会添加新信息。这两个功能都适用于桌面，但不适用于触摸屏。我的第一个想法是触
javascript - 点击标签时的事件顺序
所以我的网站上有一个正常的链接，我想为它添加跟踪。我可以设想很多方法来做到这一点，但我已经确定通过编写一个小的 jquery 函数并在我的标签中放置一个小片段来实现这一点非常简单: click me!
Android - ImageButton 点击
我正在尝试使我的图片按钮看起来不错。我尝试了几种不同的方法，但它们看起来都不对。这是一个圆形图像，我想让它看起来像是可以按下的。这是我到目前为止所得到的。 android:textAppearance

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法点击 anchor 链接