背景容器Div超链接

Question

我有一个Bootstrap V3.0.1网站，我需要对容器div进行超链接。 HTML布局类似于以下内容：

<div class="g-content-wrapper">
    <div class="Sidebar1">Text And Links here</div>
    <div class="Main-Content">Text And Links here</div>
    <div class="Sidebar2">Text And Links here</div>
</div>

CSS：

.g-content-wrapper {
    background: #828282 url(../img/Black-Background-Fabric-Wallpaper.jpg) fixed center;
    padding-top: 10px;
}

提前谢谢！

Answer 1

您应该使用div标记代替anchor，或者使用anchor代码包围您的div。

解决方案1 ​​

<a class="g-content-wrapper" href="your_page.com">
    <div class="Sidebar1">Text And Links here</div>
    <div class="Main-Content">Text And Links here</div>
    <div class="Sidebar2">Text And Links here</div>
</a>

解决方案2

<a href="your_page.com">
    <div class="g-content-wrapper">
        <div class="Sidebar1">Text And Links here</div>
        <div class="Main-Content">Text And Links here</div>
        <div class="Sidebar2">Text And Links here</div>
    </div>
</a>

虽然最好使用anchor标记，而不是用它来包围div。

如果您只想将内部div作为链接，则可以在此div中应用相同的内容。

示例

<div class="g-content-wrapper">
    <a class="Sidebar1" href="your_page1.com">Text And Links here</a>
    <a class="Main-Content" href="yor_page2.com">Text And Links here</a>
    <a class="Sidebar2" href="your_page3.com">Text And Links here</a>
</div>

修改

<强>假设

如果你希望div表现为链接而不是点击内部链接，你可以这样做：

$(".g-content-wrapper").on('click', function() {
  location.href = 'your_page.com';
});

$(".g-content-wrapper a[href]").on('click', function(e) {
  e.stopPropagation();
});

.g-content-wrapper {
    background: #828282 url(../img/Black-Background-Fabric-Wallpaper.jpg) fixed center;
    padding-top: 10px;
}

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

<div class="g-content-wrapper">
  <div class="Sidebar1">
    <a href="test.com">Test</a>
  </div>
  <div class="Main-Content">Text And Links here</div>
  <div class="Sidebar2">Text And Links here</div>
</div>