当用户点击内部链接时，显示html页面的一部分

Displaying a section of a html page when a user clicks on the internal link

本文关键字：html 显示 一部分 用户 内部 链接      更新时间：2023-09-26

我想让它更容易导航的HTML页面，我已经创建。页面开头的链接提供部分跳转。现在我想隐藏DIV内容，并保持与内部链接只有当有人加载页面，然后当用户点击一个内部链接，只有与DIV相关的内容应显示给用户。我应该使用哪些脚本?

我还想包括一个按钮，可以允许使用关闭/隐藏的内容后，他们完成阅读显示的部分，并采取与内部链接的主页。

<h3>Antithyroid Drugs</h3>
    <ul>
                <li><a href="#thioamides">Thioamides</a></li>
                <li><a href="#iodine_salts">Iodide Salts and Iodine</a></li>
                <li><a href="#radioactive_iodine">Radioactive Iodine</a></li>
                <li><a href="#anion_inhibitors">Anion Inhibitors</a></li>
                <li><a href="#others">Other Drugs</a></li>
    </ul>
    <div id="thioamides">
    Thioamides
    Methimazole and propylthiouracil (PTU) are small sulfur-containing thioamides that inhibit thyroid hormone synthesis by blocking peroxidase-catalyzed reactions, iodination of the tyrosine residues of thyroglobulin, and coupling of DIT and MIT (Figure 38–1). Propylthiouracil and, to a much lesser extent, methimazole inhibit peripheral conversion of T4 to T3. Because the thioamides do not inhibit the release of preformed thyroid hormone, their onset of activity is usually slow, often requiring 3–4 wk for full effect. The thioamides can be used by the oral route and are effective in young patients with small glands and mild disease. Methimazole is generally preferred because it can be administered once per day. However, PTU is preferred in pregnancy because it is less likely than methimazole to cross the placenta and enter breast milk. Toxic effects include skin rash (common) and severe reactions (rare) such as vasculitis, agranulocytosis, hypoprothrombinemia, and liver dysfunction. These effects are usually reversible.
    </div>
    <div id="iodine_salts">
    Iodide Salts and Iodine
    Iodide salts inhibit iodination of tyrosine and thyroid hormone release (Figure 38–1); these salts also decrease the size and vascularity of the hyperplastic thyroid gland. Because iodide salts inhibit release as well as synthesis of the hormones, their onset of action occurs rapidly, within 2–7 d. However, the effects are transient; the thyroid gland "escapes" from the iodide block after several weeks of treatment. Iodide salts are used in the management of thyroid storm and to prepare patients for surgical resection of a hyperactive thyroid. The usual forms of this drug are Lugol's solution (iodine and potassium iodide) and saturated solution of potassium iodide. Adverse effects include rash, drug fever, metallic taste, bleeding disorders, and, rarely, anaphylactic reactions.
    </div>
    <div id="radioactive_iodine">
    Radioactive Iodine
    Radioactive iodine (131I) is taken up and concentrated in the thyroid gland so avidly that a dose large enough to severely damage the gland can be given without endangering other tissues. Unlike the thioamides and iodide salts, an effective dose of 131I can produce a permanent cure of thyrotoxicosis without surgery. 131I should not be used in pregnant.
    </div>

    <div id="anion_inhibitors">
    Anion Inhibitors
    Anions such as thiocyanate (SCN–) and perchlorate (ClO4–) block the uptake of iodide by the thyroid gland through competitive inhibition of the iodide transporter. Their effectiveness is unpredictable and ClO4– can cause aplastic anemia, so these drugs are rarely used clinically.
    </div>
    <div id="others">
    Other Drugs
    An important class of drugs for the treatment of thyrotoxicosis is the  blockers. These agents are particularly useful in controlling the tachycardia and other cardiac abnormalities of severe thyrotoxicosis. Propranolol also inhibits the peripheral conversion of T4 to T3.
    </div>

对于纯CSS解决方案，:target将为您工作。

jsFiddle 

div { display:none; }
div:target { display:block; }

对于show all按钮，您可以使用JavaScript按钮来扩展该CSS，该按钮将添加一个类来强制显示所有div。

jsFiddle

JavaScript 

var showAll = document.getElementById('show-all');
showAll.onclick = function () {
    var divs = document.querySelectorAll('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].className = 'force-show';
    }
}
CSS 

div { display:none; }
div:target,
div.force-show { display:block; }

的支持

IE8及以下版本不支持:target，如果IE8支持是至关重要的，那么你可能会想要更多的JavaScript解决方案。

jsFiddle 

var showAll = document.getElementById('show-all');
var divs = document.querySelectorAll('div');
var links = document.querySelectorAll('a[href^="#"]');
showAll.onclick = function () {
    for (var i = 0; i < divs.length; i++) {
        divs[i].className = 'force-show';
    }
}
for (var i = 0; i < links.length; i++) {
    links[i].onclick = (function (i) {
        return function () {
            hideAllDivs();
            var linkDiv = document.getElementById(links[i].getAttribute('href').slice(1));
            linkDiv.className = 'force-show';
        }
    })(i);
}
function hideAllDivs() {
    for (var i = 0; i < divs.length; i++) {
        divs[i].className = '';
    }
}
相关文章：