让地址 link 在 JavaScript 中打开隐藏部分
Let address link open hide section in JavaScript
我是 JS 的新手所以我的问题是如果我有很多部分并且我可以在单击按钮时打开它们(默认情况下它们是 display: none;
并在单击同一页面上的菜单按钮时打开).我需要创建链接,如果有人在地址框中输入,那么该部分将打开......但是如果它的地址 display: none;
如何创建?也许我错了,你可以建议一些更好的方法吗?
<section style="display: none;" id="sectionIepirkumi" class="w3-container w3-threequarter section">
<div id="sectionTopLine" class="w3-border-top w3-border-green"></div>
<h5 id="sectionAddress" class="w3-margin-bottom">
<a id="sectionAddressFirstPageLink" class="sectionAddressLink" onclick="openSection('sectionFirstPage')">
Sākumlapa </a>/
<a class="sectionAddressLink" onclick="openSection('sectionAboutSchoolPage')"> Par Skolu </a>/
<a class="" style="font-weight: bold;"> IEPIRKUMI</a>
</h5>
<div id="sectionBottomLine" class="w3-border-top w3-border-green w3-margin-bottom"></div>
<div class="w3-panel w3-border">
<h3>Uz doto momentu nav aktuālu iepirkumu!</h3>
</div>
</section>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
你让它变得复杂,因为它(而不是使用 if..else)有一个方法 classList, which lets you toggle the class of the element you want. The method is toggle().
稍后您可以创建一个名为 .show
的 class,当给定 class 时,它会将您的元素显示更改为 block到元素。
提醒 : 永远不要使用 var
,使用 let & const
这是最新的语法。 (ecma-script 6)
function myFunction() {
const container = document.getElementById('sectionIepirkumi');
container.classList.toggle('show');
};
document.querySelector('button').addEventListener('click', myFunction);
.show {
display: block !important;
}
<button type='button'>Click</button>
<section style="display: none;" id="sectionIepirkumi" class="w3-container w3-threequarter section">
<div id="sectionTopLine" class="w3-border-top w3-border-green"></div>
<h5 id="sectionAddress" class="w3-margin-bottom">
<a id="sectionAddressFirstPageLink" class="sectionAddressLink" onclick="openSection('sectionFirstPage')">
Sākumlapa </a>/
<a class="sectionAddressLink" onclick="openSection('sectionAboutSchoolPage')"> Par Skolu </a>/
<a class="" style="font-weight: bold;"> IEPIRKUMI</a>
</h5>
<div id="sectionBottomLine" class="w3-border-top w3-border-green w3-margin-bottom"></div>
<div class="w3-panel w3-border">
<h3>Uz doto momentu nav aktuālu iepirkumu!</h3>
</div>
</section>
我是 JS 的新手所以我的问题是如果我有很多部分并且我可以在单击按钮时打开它们(默认情况下它们是 display: none;
并在单击同一页面上的菜单按钮时打开).我需要创建链接,如果有人在地址框中输入,那么该部分将打开......但是如果它的地址 display: none;
如何创建?也许我错了,你可以建议一些更好的方法吗?
<section style="display: none;" id="sectionIepirkumi" class="w3-container w3-threequarter section">
<div id="sectionTopLine" class="w3-border-top w3-border-green"></div>
<h5 id="sectionAddress" class="w3-margin-bottom">
<a id="sectionAddressFirstPageLink" class="sectionAddressLink" onclick="openSection('sectionFirstPage')">
Sākumlapa </a>/
<a class="sectionAddressLink" onclick="openSection('sectionAboutSchoolPage')"> Par Skolu </a>/
<a class="" style="font-weight: bold;"> IEPIRKUMI</a>
</h5>
<div id="sectionBottomLine" class="w3-border-top w3-border-green w3-margin-bottom"></div>
<div class="w3-panel w3-border">
<h3>Uz doto momentu nav aktuālu iepirkumu!</h3>
</div>
</section>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
你让它变得复杂,因为它(而不是使用 if..else)有一个方法 classList, which lets you toggle the class of the element you want. The method is toggle().
稍后您可以创建一个名为 .show
的 class,当给定 class 时,它会将您的元素显示更改为 block到元素。
提醒 : 永远不要使用 var
,使用 let & const
这是最新的语法。 (ecma-script 6)
function myFunction() {
const container = document.getElementById('sectionIepirkumi');
container.classList.toggle('show');
};
document.querySelector('button').addEventListener('click', myFunction);
.show {
display: block !important;
}
<button type='button'>Click</button>
<section style="display: none;" id="sectionIepirkumi" class="w3-container w3-threequarter section">
<div id="sectionTopLine" class="w3-border-top w3-border-green"></div>
<h5 id="sectionAddress" class="w3-margin-bottom">
<a id="sectionAddressFirstPageLink" class="sectionAddressLink" onclick="openSection('sectionFirstPage')">
Sākumlapa </a>/
<a class="sectionAddressLink" onclick="openSection('sectionAboutSchoolPage')"> Par Skolu </a>/
<a class="" style="font-weight: bold;"> IEPIRKUMI</a>
</h5>
<div id="sectionBottomLine" class="w3-border-top w3-border-green w3-margin-bottom"></div>
<div class="w3-panel w3-border">
<h3>Uz doto momentu nav aktuālu iepirkumu!</h3>
</div>
</section>