앵커 링크를 클릭 할 수 없습니다
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
