-1

我试图让浏览我创建的 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>

4

1 回答 1

5

因为纯 CSS 解决方案:target将为您工作。

jsFiddle

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

至于显示所有按钮，您可以使用 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 = '';
    }
}
于 2013-03-19T12:45:33.270 回答