Ankerlink kann nicht angeklickt werden
https://stackoverflow.com//questions/25024464
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich arbeite an meiner neuen Website und habe ein Blog-Board mit Effekten im Mauerwerks-/Pinterest-Stil.Wenn Sie mit der Maus über einen Beitrag fahren, wird eine Schaltfläche angezeigt, die auf den Blog/die einzelne Seite verweisen sollte.Dies geschieht, wenn Sie mit der rechten Maustaste klicken und in einem neuen Fenster öffnen, nicht jedoch, wenn Sie einfach mit der linken Maustaste klicken.
Ich vermute, dass es etwas mit dem Javascript zu tun hat, das ich für den Mauerwerksstil verwende.
Die Testseite ist hier live: http://zonocreative.co.uk/lee/blog.html
Wenn jemand helfen könnte, wäre es großartig.
Grüße
Als Referenz hier mein HTML-Code:
<!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
Lösung
Sie müssen entfernen e.preventDefault(); In $(".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);
}
});
});
Andere Tipps
Hier ist Ihr Problem:
generasacodicetagpre.Dies erfasst alle Links innerhalb ".panel a" und verhindert das Standardverhalten.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
