2017-02-14 2 views
-3

Ich habe diesen Code Banner auf der unteren Seite an Seite links und rechts, nichts geschieht für Floating ist, wenn ich mit dem linken Banner geklickt habe, aber wenn ich das richtige Banner klicken, Das Banner auf der linken Seite wurde automatisch geschlossen, und wenn ich erneut auf das rechte Banner klicke, wird es auf eine andere Website geleitet, ABER das Banner verschwindet.kann jemand mir helfen, meinen Code zu beheben

Und meine Frage ist:

  1. wie linke und rechte Arbeit richtig zu machen, können links Banner und Ziel Website klicken und direkt, wenn ich mit dem rechten Banner klicken Sie auf den linken Banner

  2. nicht schließen
  3. nach banner geklickt banner tun

Dies ist der Code ich habe auf meiner Website automatisch

geschlossen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#bottomads").click(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
    $("#bottomads2").click(function(){ 
    $(this).hide(); 
    }); 
}); 
</script> 

<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads"> 
<a href="http://example.com" target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
<a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0"></a> 
</div> 

<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;left: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2"> 
<a href="http://example.com" target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
<a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0"></a> 
</div> 

Ich hoffe, dass ich gut erklären kann, und danke für die ganze Antwort.

Antwort

0
  1. Ihre bottomads2 hat
  2. demselben Grund wie oben

Schlagen Sie mehr auf bottomads überschichtet Test in https://jsfiddle.net, bevor er fragte die nächste Frage zu tun.

+0

Pflege zu erklären, wie es un-überschichtet zu machen oder einen guten Code? Danke – juicebyah

+0

Sicher, Sie können ein Spiel hier haben https://jsfiddle.net/o9rtcf38/3/ –

4

Problem Ihr Problem wird in diesem Bild gezeigt. bottomads2's div ist auf bottomads.

Die Lösung für dieses Problem ist:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script> 
$(document).ready(function() { 

    $("#bottomads").click(function() { 
     $(this).hide(); 
     $("#bottomads").style('width', '100%'); 
    }); 

    $("#bottomads2").click(function() { 
     $(this).hide(); 
    }); 

}); 
</script> 

<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads"> 
    <a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
    <a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0"></a> 
</div> 
<div style='text-align:center;display:scroll;position:fixed;bottom:5px;left: 700px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2"> 
    <a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a> 
    <a href="javascript:hidefreebie();"><img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: fixed;middle: 20px;top: 0;" border="0"></a> 
</div> 

auch sauber zu codieren versuchen. Sie werden eine Menge Blogs darüber finden, wie man sauberen Code schreibt. d.h versuchen Klassen für gleiche Art von Styling zu machen:

.bottomads{ 
     text-align:center; 
     display:scroll; 
     position:fixed; 
     bottom:5px; 
     z-index:999; 
     -webkit-transform:translateZ(0); 
    } 

Dann wird die Zeile wie folgt sein:

<div style='width:100%;margin:auto;right: 270px;' id="bottomads" class="bottomads"> 
+0

danke für die Antwort, ich werde versuchen, es auf meiner Seite – juicebyah

+0

Ihr Willkommen zu imitieren :) @juicebyah – gauravmehla

Verwandte Themen