时间戳

首页 > 解决方案 > 背景容器 Div 超链接

jquery - 背景容器 Div 超链接

问题描述

我有一个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;
}

先感谢您！

标签： jqueryhtmlcss

解决方案

您应该代替div使用anchor标签，或者只是用标签包围您的 div anchor。

解决方案 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>

推荐阅读