在索引中，我有一个导航菜单，可将我带到网站的每个页面。一旦我点击并访问该页面，一切看起来都很完美。
index.html导航代码
<nav class="masthead-menu" id="masthead-menu">
<ul class="masthead-menu__list">
<li class="masthead-menu__item"><a class="current" href="index.html">Home</a></li>
<li class="masthead-menu__item"><a href="tratamientos.html">Tratamientos</a></li>
<li class="masthead-menu__item"><a href="profesionales.html">Profesionales</a></li>
<li class="masthead-menu__item"><a href="clinica.html">La Clínica</a></li>
<li class="masthead-menu__item"><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
然后我在索引中有一系列链接，每个链接都将我带到位于索引不同页面中的不同选项卡，这就是 tratamientos。 html
index.html中的链接代码
<article class="service">
<div class="service-content">
<h3 class="service-title">Implantología</h3>
<p class="service-excerpt">La pérdida de piezas, provoca disfunciones en los dientes y genera graves problemas bucodentales.</p>
<a href="tratamientos.html#tab-1" class="btn-link">Saber Más</a>
</div>
<img src="images/implantologia_700.jpg" alt="Implantología" class="service-img">
</article>
<article class="service">
<div class="service-content service-content__left">
<h3 class="service-title">Endodoncia</h3>
<p class="service-excerpt">La endodoncia se aplica cuando la pulpa dental enferma (se inflama) como consecuencia de una caries profunda, una enfermedad periodontal, un traumatismo, etc.</p>
<a href="tratamientos.html#tab-2" class="btn-link">Saber Más</a>
</div>
<img src="images/endodoncia_700.jpg" alt="Endodoncia" class="service-img service-img__left">
</article>
<article class="service">
<div class="service-content">
<h3 class="service-title">Periodoncia</h3>
<p class="service-excerpt">La enfermedad periodontal afecta a las encías y al ligamento que sujeta los dientes a los maxilares.</p>
<a href="tratamientos.html#tab-3" class="btn-link">Saber Más</a>
</div>
<img src="images/periodoncia_700.jpg" alt="Periodoncia" class="service-img">
</article>
<article class="service">
<div class="service-content service-content__left">
<h3 class="service-title">Conservadora</h3>
<p class="service-excerpt">Abarca la prevención, diagnóstico y tratamiento de la caries dental desde la mínima destrucción de tejido hasta las grandes restauraciones.</p>
<a href="tratamientos.html#tab-4" class="btn-link">Saber Más</a>
</div>
<img src="images/conservadora_700.jpg" alt="Conservadora" class="service-img service-img__left">
</article>
<article class="service">
<div class="service-content">
<h3 class="service-title">Estética Dental</h3>
<p class="service-excerpt">Hoy en día, la sonrisa es una parte importante de nuestra imagen de cara a otras personas. Además, la sonrisa puede llegar a ser importante en algunas profesiones.</p>
<a href="tratamientos.html#tab-5" class="btn-link">Saber Más</a>
</div>
<img src="images/estetica_700.jpg" alt="Estética Dental" class="service-img">
</article>
<article class="service">
<div class="service-content service-content__left">
<h3 class="service-title">Ortodoncia</h3>
<p class="service-excerpt">Gracias a las ortodoncias podemos corregir el posicionamiento en los arcos dentales de forma que se pueda masticar correctamente y configurar una estética optima.</p>
<a href="tratamientos.html#tab-6" class="btn-link">Saber Más</a>
</div>
<img src="images/ortodoncia_700.jpg" alt="Ortodoncia" class="service-img service-img__left">
</article>
这是 tratamientos.html 中的代码
<div class="tabs tabs--lg">
<ul class="tabs__list">
<li class="tabs__item tabs__item--active">
<a href="#tab-1" class="tabs__link">Implantología</a>
</li>
<li class="tabs__item">
<a href="#tab-2" class="tabs__link">Endodoncia</a>
</li>
<li class="tabs__item">
<a href="#tab-3" class="tabs__link">Periodoncia</a>
</li>
<li class="tabs__item">
<a href="#tab-4" class="tabs__link">Conservadora</a>
</li>
<li class="tabs__item">
<a href="#tab-5" class="tabs__link">Estética Dental</a>
</li>
<li class="tabs__item">
<a href="#tab-6" class="tabs__link">Ortodoncia</a>
</li>
</ul>
<div class="tabs__content">
<div id="tab-1" class="tabs__area tabs__area--active">
<div class="panel-row">
<div class="panel-row__text">
<h3>Implantología Dental</h3>
<p>La implantología dental es la disciplina de la odontología que tiene como objetivo sustituir dientes perdidos mediante la colocación quirúrgica de un implante en el hueso maxilar o mandibular.</p>
<p>Los implantes dentales pueden ser de diferentes tamaños, superficies y materiales. Sobre los implantes se diseñan las rehabilitaciones protéticas que van a permitir restituir las funciones masticatorias, fonéticas y estéticas del paciente.</p>
<p>La elección del tipo de implante se realiza en función del diagnóstico, pronóstico y del plan de tratamiento interdisciplinario entre el odontólogo general con un especialista en cirugía, periodoncia y prostodoncia.</p>
<p>Actualmente la mayoría de los implantes intraóseos se fabrican con materiales altamente biocompatibles como el titanio, que le permite una unión al hueso biológicamente estable denominada osteointegración.</p>
</div>
<div class="panel-row__img">
<img src="images/implante_dental.jpg" alt="Implante dental">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Cirugía Oral</h3>
<p>La cirugía del tercer molar o muela del juicio es la más frecuente. Su exodoncia se realiza en los casos en los que dan sintomatología (dolor agudo, infecciones de repetición, caries en los segundos molares por dificultad de higiene, etc) o se encuentra algún signo radiológico patológico (algún quiste o erosión de raíces de otras piezas).</p>
</div>
<div class="panel-row__img">
<img src="images/cirugia_dental.jpg" alt="Cirugía dental">
</div>
</div>
</div>
<div id="tab-2" class="tabs__area">
<div class="panel-row">
<div class="panel-row__text">
<h3>Endodoncia</h3>
<p>En el caso de dientes severamente afectados por diversas circunstancias como pueden ser caries profundas, traumatismos o infecciones, se realiza previamente a la restauración, la endodoncia.</p>
<p>La endodoncia es el tratamiento de conductos radiculares, esto corresponde a toda terapia que es practicada en el complejo dentino-plupar de un diente. La terapia endodóntica consiste en la extirpación parcial (pulpotomías en dientes temporales) o la extirpación total de la pulpa dental (nervio-arteria-vena).</p>
</div>
<div class="panel-row__img">
<img src="images/instrumental.jpg" alt="Instrumental">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Patología periapical</h3>
<p>La periodontitis apical es un proceso inflamatorio del periodonto apical y/o lateral del diente. El objetivo de la endodoncia es prevenir y/o curar la periodontitis apical.</p>
<p>En algunos casos hay que complementar la endodoncia con tratamiento quirúrgico denominado apicectomía.</p>
</div>
<div class="panel-row__img">
<img src="images/periapical.jpg" alt="Patología periapical">
</div>
</div>
</div>
<div id="tab-3" class="tabs__area">
<div class="panel-row">
<div class="panel-row__text">
<h3>Periodoncia</h3>
<p>La periodoncia es la especialidad odontológica que estudia la prevención, diagnóstico y tratamiento de las enfermedades y condiciones que afectan los tejidos que dan soporte a los dientes, para el mantenimiento de la salud, función y estética de los dientes y sus tejidos adyacentes.</p>
<p>Las principales enfermedades periodontales que afectan a la dentición son la periodontitis y la gingivitis.</p>
<p>La enfermedad periodontal se manifiesta como un gingivitis (inflamación y sangrado de la encía sin afectar el hueso) o periodontitis, donde ocurre la destrucción de hueso que soporta el diente.</p>
<p>Si no es tratado a tiempo puede ocasionar la pérdida de los dientes.</p>
</div>
<div class="panel-row__img">
<img src="images/periodoncia.jpg" alt="Periodoncia">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Prevención</h3>
<p>La prevención y el diagnóstico precoz son fundamentales en la enfermedad periodontal. Una encía sana nunca sangra, si existe sangrado es un motivo para acudir a tu odontólogo.</p>
<p>Así mismo se convierten en buenos aliados para nuestra higiene dental, como complemento al cepillado de dientes, el uso de cepillos interdentales y la seda dental.</p>
</div>
<div class="panel-row__img">
<img src="images/prevencion.jpg" alt="Prevención">
</div>
</div>
</div>
<div id="tab-4" class="tabs__area">
<div class="panel-row">
<div class="panel-row__text">
<h3>Odontología General</h3>
<p>En Odontología Cazorla cuidamos de tu salud.</p>
<p>La caries constituye la enfermedad crónica más frecuente en el ser humano. Es una enfermedad infecciosa multifactorial que todos padecemos en mayor o menor medida y que afecta a los tejidos duros de los dientes.</p>
<p>En el tratamiento de caries, después de la eliminación y desinfección, restauramos com composite de última generación, que garantizan la funcionalidad y la estética de la obturación.</p>
<p>Entre las cualidades de estos materiales podemos mencionar su elevada resistencia, su nula toxicidad y su aspecto totalmente natural y estético que iguala por completo el color y brillo natural del diente.</p>
</div>
<div class="panel-row__img">
<img src="images/odontologia-general.jpg" alt="Odontología General">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Prótesis Dental</h3>
<p>El pricipal objetivo de una prótesis dental es recuperar la funcionalidad de la boca, aunque no es lo único. Toda prótesis, sea del tipo que sea, debe tener un sistema de retención eficiente, es decir, que la restauración se mantenga sujeta en la boca, ya que de no ser así la masticación, deglución y fonética, se verán afectadas.</p>
<p>Existen diversos tipos de prótesis dentales y cada una de ellas seran las indicadas según las necesidades del paciente. En término genéricos hablamos de dos tipos de prótesis, fija y removible.</p>
</div>
<div class="panel-row__img">
<img src="images/protesis-dental.jpg" alt="Prótesis Dental">
</div>
</div>
</div>
<div id="tab-5" class="tabs__area">
<div class="panel-row panel-row__single">
<div class="panel-row__text">
<h3>Estética Dental</h3>
<p>En la sociedad moderna se convierte en algo imprescindeible para nuestra apariencia estética tener una buena sonrisa.</p>
<p>La estética y cosmética dental comprende todos los procedimientos encaminados a corregir aquellas imperfecciones que nos impiden sentirnos a gusto con nuestros dientes.</p>
<p>Todos nuestros tratamientos se realizan siempre simulando la belleza natural de los dientes, de manera que procuramos devolver la salud oral sin olvidar el aspecto estético.</p>
<ul class="menu-list__tab">
<li>Blanqueamiento dental.</li>
<li>Carillas de porcelana.</li>
<li>Coronas de zirconio y alúmina.</li>
<li>Reconstrucciones de composite.</li>
</ul>
</div>
<div class="panel-row__img">
<img src="images/estetica-dental.jpg" alt="Estética Dental">
</div>
</div>
</div>
<div id="tab-6" class="tabs__area">
<div class="panel-row panel-row__single">
<div class="panel-row__text">
<h3>Ortodoncia</h3>
<p>Un diagnóstico certero es la clave para un buen resultado.</p>
<p>Te propondremos el tratamiento de ortodoncia adecuado a tu problema y a tus necesidades.</p>
<p>No dejes de cumplir tu sueño de tener una sonrisa bonita. Tú eliges.</p>
<ul class="menu-list__tab">
<li>Ortodoncia convencional con brackets metálicos y cerámicos (estéticos)</li>
<li>Ortodoncia invisible "invisalign"</li>
<li>Ortopedia dentofacial</li>
</ul>
</div>
<div class="panel-row__img">
<img src="images/ortodoncia.jpg" alt="Ortodoncia">
</div>
</div>
</div>
</div>
</div>
当我点击链接时遇到问题，因为它是通过 anchor ，它会将我带到相应的 anchor 。然后选项卡的导航菜单“隐藏”在页面导航菜单后面。
图像 1 是它所显示的样子，图像 2 是它应有的样子。
我只需要在页面加载后滚动页面，但仅当人们单击特定链接之一时才滚动，而不是通用治疗链接。也就是说，如果页面的url显示#tab-1、#tab-2等，那么我想要滚动，如果没有，则不需要。
选项卡代码
var app = {};
app.tabs = (函数() { var 模块 = {};
module.init = function() {
var $tabs = $('.tabs');
var $tabList = $('.tabs__list');
var $tabItem = $('.tabs__item');
var $tabItemActive = $('.tabs__item--active');
var $tabLink = $('.tabs__link');
var width = $(window).width();
var tabSwitcher = function() {
// On tab link click
$tabLink.on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).addClass('tabs__area--active').siblings().removeClass('tabs__area--active')
// Change/remove current tab to active
$(this).parent('li').addClass('tabs__item--active').siblings().removeClass('tabs__item--active');
e.preventDefault();
});
}
var tabToggle = function() {
$tabItem.on('click', function(e) {
$(this).parent($tabList).toggleClass('tabs__list--open');
});
}
var tabController = function() {
tabToggle();
}
$(window).resize(function() {
var width = $(window).width();
if ($(window).width() != width) {
width = $(window).width();
tabController();
}
});
tabController();
tabSwitcher();
};
return module;
加载时如何滚动页面？
如果需要，这是网页的 URL:link
最佳答案
您可以使用以下代码片段:
$('.tabs__link a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
它使用您已在站点中使用的 jQuery，因此请确保将其包含在引用 jQuery 的下方。
它的工作原理是检测点击，一旦检测到点击，它将滚动到被点击元素的 anchor 标记。
定位并不完美，因此我从中减去了150px。你可以尝试一下这个!
关于javascript - 通过 Javascript 更改 CSS 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46012454/