这个无法访问的区域是否可以与CSS连接?

时间:2017-04-28 15:54:23

标签: php html css html5 drupal

我必须管理一个有以下情况的网站:

我们在网站上有一个横幅系统,但横幅只能在小区域上点击。我想让它们全部可点击,但有一些限制。

我无法访问php文件,我可以在一定程度后管理HTML。 目前我只能管理图像上标记的小区域。 Example of the area

我写的每个代码都只放在这个标记区域。没有办法使整个横幅可点击,因为GUI上没有那种选项。 我认为我可以使用高于该区域的CSS类来定位,但不能编辑HTML。

是否可以选择让所有这些区域都可以点击而不会弄乱一切?

以下是一个横幅的完整HTML代码:



<li class="flex-active-slide" style="width: 1583px; float: left; display: block;">
  <div class="image-flexslider-content-left clearfix">
    <div class="views-field views-field-field-slider-image">
      <div class="field-content"><img typeof="foaf:Image" src="/example-image.png" alt="" draggable="false" style="margin-left: -84.25px; height: 510px;"></div>
    </div>
  </div>
  <div class="white">
    <div class="logo-big mobile-logo">
      <h1 class="logo">
        <a href="/" title="Lorem"></a>
      </h1>
    </div>
  </div>
  <div class="wrapper-container white">
    <div class="logo-big">
      <h1 class="logo">
        <a href="/" title="Lorem"></a>
      </h1>
    </div>
    <div class="slide-cover flexslider-content-left">
      <div class="views-field views-field-title"> <span class="field-content"></span> </div>
      <div class="views-field views-field-body">
        <div class="field-content">
          <a href="/something/more/">
            <div class="double-container">
              <p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 1</p>
            </div>
            <div class="double-container">
              <p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 2</p>
            </div>
          </a>
          <div class="double-container blue-responsive double-blue-head larger-head myt-margin" style="padding: 10px 12px  15px 20px; margin-top: 40px;">
            <a href="/something/more/"> <img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false"></a>
          </div>

        </div>
      </div>
      <div class="views-field views-field-contextual-links"> <span class="field-content"></span> </div>
    </div>
  </div>
</li>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您可以将标记移到整个div class =“field-content”

之外
`n = length(rootnode);`
`i = 1;`
 if n > 1
    while i <  n
        D(:,i) = dfsearch(Bgraph, rootnode(i));


    i = i+1;
    end
 end

答案 1 :(得分:0)

使用JavaScript,您可以添加event handler以使页面上的任何元素都可以点击。因此,例如,如果您想使其中一个<div class="field-content">元素可单击,您可以添加一个这样的事件处理程序(假设您要为此示例创建第一个可单击的元素):

document.querySelectorAll("div.field-content")[0].addEventListener('click', function() {
    // your code here; whatever you want to happen when they click
});

您可以将事件处理程序应用于页面上的任何HTML元素。如果将其应用于父元素,则在单击子元素时也会触发它,因此只需向横幅的外部元素添加事件处理程序,即可使整个横幅可单击。

更新:要将点击处理程序应用于整个类,请使用for循环,如下所示:

var banners = document.getElementsByClassName("field-content");
for (var i = 0; i < banners.length; i++) {
    banners[i].addEventListener('click', function() {
        location.href = "yourURL";
    });
}