-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があなたのために働くでしょう。

jsフィドル

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

すべて表示ボタンについては、すべての div を強制的に表示するクラスを追加する JavaScript ボタンを使用して、この CSS を拡張できます。

jsフィドル

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.

jsフィドル

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 に答える