javascript - 使用引导面板内的图像超链接到选项卡
问题描述
我正在尝试使用引导程序选项卡内的图像超链接到不同的面板/选项卡。例如，在下面的代码中，我想超链接所有选项卡中的第一个图像以打开选项卡/面板品牌。这可能吗？到目前为止，我尝试使用面板 ID 的锚标记，但它不起作用。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container mt-5">
<!--Section: Content-->
<section class="dark-grey-text text-center">
<style>
.md-pills .nav-link.active {
background-color: #3f51b5;
}
</style>
<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
</li>
</ul>
</div>
<!--First column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel32" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel33" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel34" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 4-->
</div>
<!--Tab panels-->
</section>
</div>解决方案
基本上，您需要用锚标签包装您的特色图像，并在他们的点击时，在导航选项卡内找到那些导航链接并触发他们的点击。
首先，为您希望这些图像触发点击的导航选项卡链接添加一个 ID。稍后我可以用锚标签包装图像并将它们设置href为javascript:document.getElementById().click();触发导航链接的点击。
我尝试过使用javascript:document.querySelector(a[href="#xxx"]).click();，但由于某种原因没有成功。
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold"
data-toggle="tab" href="#panel31" role="tab">
ALL
</a>
</li>
<li class="nav-item">
<a id="branding-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">
BRANDING
</a>
</li>
<li class="nav-item">
<a id="packaging-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">
PACKAGING
</a>
</li>
<li class="nav-item">
<a id="print-design-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">
PRINT DESIGN
</a>
</li>
</ul>
然后剩下的就是用锚标签包装特色图像并设置它们的href：
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('branding-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('packaging-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('print-design-tab-link').click();">
<div />
<p />
</a>
</div>
您还可以编写一些自定义 jQuery 并绑定图像点击以触发导航选项卡链接点击。我只是认为人们可能喜欢在不单独编写任何额外 JavaScript 的情况下实现这一点。
演示： https ://jsfiddle.net/davidliang2008/q9ztuv4w/8/
点击后Scoll到顶部？
Yea it's possible, but now instead of inline JavaScript, it makes more sense to write some custom JavaScripts to listen to the clicks, triggers nav link and do the scrolling.
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a data-nav-link-id="#branding-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#packaging-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#print-design-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
$(function() {
$('a.reference-link').click(function(){
// Get the nav link id from data attribute
let navLinkId = $(this).data('nav-link-id');
// Simulate the click on nav link
$(navLinkId).trigger('click');
// Scroll the document body to the top
$(body).scrollTop();
// Disable original click event on the reference-link
return false;
});
});
推荐阅读
- ffmpeg - 使用偏移量调用时 FFMPEG 失败
- php - PHP密码验证问题
- linux-kernel - 如何防止 Yocto 项目 BadValue 错误？
- rest - 无法创建新的融合页面作为另一个页面的子页面
- javascript - 如何停止可重复的javascript函数
- gradle - 在命令提示符下运行 flutter run 命令时出错：[致命错误] aapt2-3.5.0-5435860.pom:2:1: Content is not allowed in prolog
- amazon-web-services - Spark AWS Glue UI - 错误：无法找到或加载主类 $SPARK_HISTORY_OPTS - Windows Docker
- tensorflow - 如何将 .png 文件转换为 TFrecord tensorflow 格式？
- sql - 偏移和获取下一条记录发生在多个页面中
- gnuplot - 在gnuplot中拟合曲线：重复拟合给出不同的结果