Question

我试图让我更容易导航我创建的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>

Answer 1

对于纯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 = '';
    }
}

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

1 个答案:

支持