https://stackoverflow.com//questions/25024464
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在研究我的新网站，并有一个砌体/ 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>   |   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>   |   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>   |   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>   |   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>   |   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>© 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>
lee
解决方案
您需要删除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);
}
});
});
其他提示
这是你的问题：
$(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”中的所有链接并阻止默认行为。
不隶属于 StackOverflow
