如何编写超链接以打开iframe



我正试图弄清楚如何打开链接"手表&商店"显示我的iframe。在此页面上https://www.neostrata.com/past-live-shows.html.

当我点击肖像图片时,我可以打开iframe,但当我点击"观看&商店"现在链接,它只是刷新页面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Past Live Shows</title>
</head>
<body>
<div class="contenthub-wrapper">
<div class="module-e callout-content ch-ap-page-header">
<div class="contenthub-article-page-banner ">
<div class="ch-article-page-banner-bg">
<picture>
<source>
<source media="(min-width: 768px)" srcset="//neutrogena.imgix.net/neostrata/Landing_pages/neo_livepage_desktop_herobanner-min.jpg">
<source media="(max-width: 767px)" srcset="//neutrogena.imgix.net/neostrata/Landing_pages/neo_livepage_mobile_herobanner-min.jpg">
<img alt="" class="lazyloaded" src="null">
</picture>
</div>
</div>
<div class="list-heading bg-prestige text-center" id="head-subtitle-wrap">
<p class="f-gothamlight fc-white">Discover skincare tips and expert picks!</a></p>
</div>
<div class="ch-ap-content-body f-gothamlight">
<div class="list-heading text-center n-my-3">
<!-- <h2 class="title" role="presentation">Lorem ipsum dolor sit amet</h2> -->
<h2 class="title" role="presentation">Watch what you missed</h2>
</div>
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_pat-min.jpg">
</a>
<p class="host-name">Patricia Clare, <br>NEOSTRATA Canada Education Manager</p>
<small><strong>from December 8<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Holiday Skincare Tips</span></p>
<p><a href="#" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8m8QR5pIOpQ" title="Holiday Skincare Tips" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_Joy-min.jpg">
</a>
<p class="host-name">Joy Ogunneye, <br>NEOSTRATA Senior Brand Manager</p>
<small><strong>from November 18<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Holiday Tips</span></p>
<p><a href="#" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/B6nADWJ-TOI" title="Holiday Tips" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_jackie2-min.jpg">
</a>
<p class="host-name">Jacquie Hutchinson, <br>NEOSTRATA Brand Educator</p>
<small><strong>from October 20<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Winter Skincare Secrets</span></p>
<p><a href="#" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vDAcdKVExJU" title="Winter Skincare Secrets" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_jacquie1-min.jpg">
</a>
<p class="host-name">Jacquie Hutchinson, <br>NEOSTRATA Brand Educator</p>
<small><strong>from August 17<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Correct Collection Launch Party</span></p>
<p><a href="#" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wv3RbQliE98" title="Correct Launch Party" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_kim1-min.jpg">
</a>
<p class="host-name">Kim Sarros, <br>NEOSTRATA Global Educator</p>
<small><strong>from July 8<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Summer Skincare Essentials</span></p>
<p><a href="#" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3Lb3URM7nag" title="Kim's Summer Skincare Essentials" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP JOY’S PICKS FOR GLOWING SKIN</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30150R--F30101XA--F30151R--F30107XA')$
$include('Page-Include','cid','past-live-shows-includes')$
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP JACQUIE’S MUST-HAVES</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30104XA--F30102XA--F30149XB--F30136XA')$
</div>
</div>
</div>
</div>
$include('Page-Include','cid','past-live-shows-includes')$
<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP KIM’S SUMMER SKINCARE ESSENTIALS</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30150R--F30145XA--F30164U--F30156XA--F30155R')$
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP PATRICIA'S HOLIDAY SKINCARE FAVORITES</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30101XA--F30159XA--F30119XA--F30107XA')$
$include('Page-Include','cid','past-live-shows-includes')$
</div>
$include('Page-Include','cid','past-live-shows-includes')$
</div>
</div>
</div>
</body>
</html>

现在您的"手表和商店";链接没有目的地。您需要在href属性中包含这些URL中的每一个。https://www.w3schools.com/html/html_links.asp

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Past Live Shows</title>
</head>
<body>
<div class="contenthub-wrapper">
<div class="module-e callout-content ch-ap-page-header">
<div class="contenthub-article-page-banner ">
<div class="ch-article-page-banner-bg">
<picture>
<source>
<source media="(min-width: 768px)" srcset="//neutrogena.imgix.net/neostrata/Landing_pages/neo_livepage_desktop_herobanner-min.jpg">
<source media="(max-width: 767px)" srcset="//neutrogena.imgix.net/neostrata/Landing_pages/neo_livepage_mobile_herobanner-min.jpg">
<img alt="" class="lazyloaded" src="null">
</picture>
</div>
</div>
<div class="list-heading bg-prestige text-center" id="head-subtitle-wrap">
<p class="f-gothamlight fc-white">Discover skincare tips and expert picks!</a></p>
</div>
<div class="ch-ap-content-body f-gothamlight">
<div class="list-heading text-center n-my-3">
<!-- <h2 class="title" role="presentation">Lorem ipsum dolor sit amet</h2> -->
<h2 class="title" role="presentation">Watch what you missed</h2>
</div>
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_pat-min.jpg">
</a>
<p class="host-name">Patricia Clare, <br>NEOSTRATA Canada Education Manager</p>
<small><strong>from December 8<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Holiday Skincare Tips</span></p>
<p><a href="https://www.youtube.com/embed/8m8QR5pIOpQ" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8m8QR5pIOpQ" title="Holiday Skincare Tips" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_Joy-min.jpg">
</a>
<p class="host-name">Joy Ogunneye, <br>NEOSTRATA Senior Brand Manager</p>
<small><strong>from November 18<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Holiday Tips</span></p>
<p><a href="https://www.youtube.com/embed/B6nADWJ-TOI" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/B6nADWJ-TOI" title="Holiday Tips" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_jackie2-min.jpg">
</a>
<p class="host-name">Jacquie Hutchinson, <br>NEOSTRATA Brand Educator</p>
<small><strong>from October 20<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Winter Skincare Secrets</span></p>
<p><a href="https://www.youtube.com/embed/vDAcdKVExJU" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/vDAcdKVExJU" title="Winter Skincare Secrets" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_jacquie1-min.jpg">
</a>
<p class="host-name">Jacquie Hutchinson, <br>NEOSTRATA Brand Educator</p>
<small><strong>from August 17<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Correct Collection Launch Party</span></p>
<p><a href="https://www.youtube.com/embed/wv3RbQliE98" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wv3RbQliE98" title="Correct Launch Party" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="ch-ap-content-body f-gothamlight full-width">
<div class="vid-tiles-wrapper">
<div class="vid-tile">
<a role="button" class="toggle-dialog">
<img src="//neutrogena.imgix.net/neostrata/pages/live-shows/neo_videocover_kim1-min.jpg">
</a>
<p class="host-name">Kim Sarros, <br>NEOSTRATA Global Educator</p>
<small><strong>from July 8<sup>th</sup>, 2021</strong></small>
<p class="sub"><span>Summer Skincare Essentials</span></p>
<p><a href="https://www.youtube.com/embed/3Lb3URM7nag" class="uppercase">Watch & Shop</a></p>
<div class="inner-modal">
<div class="modal-content">
<a class="close-dialog">+</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3Lb3URM7nag" title="Kim's Summer Skincare Essentials" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP JOY’S PICKS FOR GLOWING SKIN</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30150R--F30101XA--F30151R--F30107XA')$
$include('Page-Include','cid','past-live-shows-includes')$
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP JACQUIE’S MUST-HAVES</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30104XA--F30102XA--F30149XB--F30136XA')$
</div>
</div>
</div>
</div>
$include('Page-Include','cid','past-live-shows-includes')$
<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP KIM’S SUMMER SKINCARE ESSENTIALS</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30150R--F30145XA--F30164U--F30156XA--F30155R')$
</div>
<div class="ch-ap-content-body f-gothamlight full-width">
<br>
<h2 class="title text-center" role="presentation">SHOP PATRICIA'S HOLIDAY SKINCARE FAVORITES</h2>
<div class="hide-add-all">
$include('Page-ShopStory', 'pids', 'F30101XA--F30159XA--F30119XA--F30107XA')$
$include('Page-Include','cid','past-live-shows-includes')$
</div>
$include('Page-Include','cid','past-live-shows-includes')$
</div>
</div>
</div>
</body>
</html>

最新更新