[英]How do i make a scrolldown to a specific tab content when using javascript:document.querySelector('#').click() after the specific tab is opened
How do I make below hyperlink scroll over to that tab's content.如何使下面的超链接滚动到该选项卡的内容。 I've used
javascript:document.querySelector('#tb').click()
and tab is opened but it doesn't scroll down over.我使用
javascript:document.querySelector('#tb').click()
并打开了选项卡,但它没有向下滚动。
Here is my source code这是我的源代码
function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; }
body { font-family: Arial; }.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; }.tab button:hover { background-color: #ddd; }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }
<h2>Tabs</h2> <p>How do i make a scrolldown to a specific tab content when the hyperlink below is clicked?</p> <a href="javascript:document.querySelector('#tb').click()">This link will open the tokyo tab..but how do i implement a scroll over?</a> <br> <br> <br> <img src="D:\Documents\TCOR22000652\travel.jpg" alt="Girl in a jacket" width="600" height="500"> <br> <br> <br> <br> <br> <br> <br> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" id="tb" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <img src="D:\Documents\TCOR22000656\tokyo.jpg" alt="Girl in a jacket" width="500" height="600"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p>
Above (3rd line of HTML
) I have used javascript:document.querySelector('#tb').click()
to open the hyperlinked tab, but how do make it scroll over to that tab's content.上面(
HTML
的第 3 行)我使用javascript:document.querySelector('#tb').click()
打开超链接选项卡,但是如何让它滚动到该选项卡的内容。
in here i place a button on tokyo and outside tokyo.在这里,我在东京和东京外放置了一个按钮。 so when the botton clicked, it will scroll to the "target"
所以当点击按钮时,它会滚动到“目标”
function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } function scrollToTop() { document.querySelector("#content").scrollIntoView(true); /* element.scrollIntoView(true) */; } function scrollToTarget() { /* element.scrollIntoView(true) */; document.querySelector('#tb').click() } /* function scrollToBottom() { element.scrollIntoView(false); } */
body {font-family: Arial;}.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; }.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; }.tab button:hover { background-color: #ddd; }.tab button.active { background-color: #ccc; }.tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } a{ color:blue; cursor: pointer; }
<h2>Tabs</h2> <p>How do i make a scrolldown to a specific tab content when the hyperlink below is clicked?</p> <a onclick="scrollToTarget();scrollToTop()">This link will open the tokyo tab..but how do i implement a scroll over?</a> <br> <button onclick="scrollToTarget();scrollToTop()">Scroll to target</button> <br> <br> <img src="D:\Documents\TCOR22000652\travel.jpg" alt="Girl in a jacket" width="600" height="500"> <br> <br> <br> <br> <br> <br> <br> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" id="tb" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <img src="D:\Documents\TCOR22000656\tokyo.jpg" alt="Girl in a jacket" width="500" height="600"> <button onclick="scrollToTop()">Scroll to target</button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus auctor commodo. Duis condimentum massa mi, vitae finibus nisl cursus ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. In quis ante tortor. Donec quis ornare turpis. Aliquam dignissim sem diam, at tristique leo blandit non. Vivamus neque nisl, dictum sit amet vulputate ac, congue et massa. Aenean a faucibus tellus, a interdum nisi. Aliquam non nisl sed metus pharetra facilisis. Maecenas eu dictum urna, ornare pharetra felis. Nunc maximus mauris in sem cursus vehicula.</p> <p id="content"> point of target </p> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.