有人可以帮我修改我的代码

Question

我有这个代码用于浮动横幅并排在底部左和正确，当我点击左横幅时没有发生任何事情，但当我点击右边时横幅，左侧的横幅自动关闭，当我再次点击右侧横幅时，它将引导您到其他网站，但横幅将消失。

我的问题是：

1. 如何使左右工作正常，左侧横幅可以点击并直接指向目标网站，当我点击右侧横幅不关闭左侧横幅

横幅点击横幅后，

2. 不会自动关闭

这是我网站上的代码：

<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>

我希望我能解释清楚，并感谢你的所有答案。

Answer 1

您的问题显示在此图片中。 bottomads2的div是关于bottomads。

此问题的解决方案是：

<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>

还尝试编写清洁代码。你会发现很多关于如何编写干净代码的博客。即尝试为相同类型的样式制作类：

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

然后这行将是这样的：

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

Answer 2

1. 您的bottomads2已叠加在bottomads上
2. 与上述相同的理由

建议您在询问下一个问题之前在https://jsfiddle.net进行更多测试。