php - 使用 Javascript 缩短 html 页面的长度

Question

如果有人可以提供帮助。我一直在用 html 和 css 开发我的页面。现在我有了这个页面，滚动并获得你想要的东西变得冗长乏味。我使用:targetcss 上的标签将页面分成几个部分，但它在某些浏览器上不起作用。我一直在玩javascript，但没有成功。任何人都可以帮助我使用我应该在页面中使用的 js 脚本，这样当有人加载页面时，它只显示将用作目录的内部链接，并且当用户单击内部链接时，只有该部分是与 div 显示链接还是弹出？

或者，有没有办法可以使用 PHP？

 <div>
            <ul>
            <li><a href="#introduction">Introduction to 
antimicrobials</a></li>
            <li><a href="#antifungals">Antifungal Drugs</a></li>
            <li><a href="#antiprotozoals">Antiprotozoal Drugs</a></li>
            <li><a href="#antihelminthics">Antihelminthic Drugs</a></li>
            <li><a href="#antibacterials">Antibacterials</a></li>
            <li><a href="#aminoglycosides">Aminoglycosides</a></li>
            <li><a href="#antifolates">Antifolate Drugs</a></li>
            <li><a href="#fluoroquinolones">Fluoroquinolones</a></li>
            <li><a href="#antimycobacterials">Antimycobacterial 
Drugs</a></li>            

            </ul>

            <div id="introduction">
            Viruses: Smallest pathogens, programmed to infect only certain 
body cells. Virus uses a body cells to reproduce itself it cannot be 
treated with medication.

Bacteria: single celled microorganism, 1000 different bacteria, but 100 
cause disease.
- Bacteria can be treated with antibiotics.
- Some bacteria are becoming immune to certain antibiotics.
- Bacterial Diseases: Strep throat, Tuberculosis Gonorrhea, Syphilis

Fungi: single celled or multicellular plantlike organism
- Fungi can cause diseases of the skin, mucous membrane, and lungs.
- Fungi Diseases: Athlete’s foot, Ringworm, Jock itch, Nail infections, 
Candidiasis</div>



<div id="antifungals">
Amphotericin B continues to be an important drug for the treatment of 
systemic fungal infections. However, several azoles and echinocandins are 
proving to be just as effective in some systemic mycoses with less risk of 
toxic effects.
</div>


<div id="antiprotozoals">
Drugs for Malaria:

Malaria is one of the most common diseases worldwide and a leading cause of 
death. Plasmodium species that infect humans (P falciparum, P malariae, P 
ovale, P vivax) undergo a primary developmental stage in the liver and then 
parasitize erythrocytes. P falciparum and P malariae have only 1 cycle of 
liver cell invasion. The other species have a dormant hepatic stage 
responsible for recurrent infections and relapses. Primary tissue 
schizonticides (eg, primaquine) kill schizonts in the liver, whereas blood 
schizonticides (eg, chloroquine, quinine) kill these parasitic forms only 
in the erythrocyte. Sporonticides (proguanil, pyrimethamine) prevent 
sporogony and multiplication in the mosquito.

Drugs: Chloroquine, Quinine, Mefloquine, Primaquine, pyrimethamine, 
proguanil, Sulfadoxine, Dapsone, Doxycycline, Amodiaquine, Atovaquone, 
Halofantrine, Artesunate, Artemether, Dihydroartemisinin

</div>

<div id="antihelminthics">
Antihelminthic drugs have diverse chemical structures, mechanisms of 
action, and properties. Most were discovered by empiric screening methods; 
many act against specific parasites, and few are devoid of significant 
toxicity to host cells. In addition to the direct toxicity of the drugs, 
reactions to dead and dying parasites may cause serious toxicity in 
patients.
</div>

<div id="antibacterials">
Beta-Lactam Antibiotics & Other Cell Wall Synthesis Inhibitors

Penicillins and cephalosporins are the major antibiotics that inhibit 
bacterial cell wall synthesis. They are called beta-lactams because of the 
unusual 4-member ring that is common to all their members. The beta-lactams 
include some of the most effective, widely used, and well-tolerated agents 
available for the treatment of microbial infections. Vancomycin, 
fosfomycin, and bacitracin also inhibit cell wall synthesis but are not 
nearly as important as the beta-lactam drugs. More than 50 antibiotics that 
act as cell wall synthesis inhibitors are currently available, with 
individual spectra of activity that afford a wide range of clinical 
applications.
</div>

<div id="aminoglycosides">
Aminoglycosides are structurally related amino sugars attached by 
glycosidic linkages. They are polar compounds, not absorbed after oral 
administration and must be given intramuscularly, or intravenously for 
systemic effect. They have limited tissue penetration and do not readily 
cross the blood-brain barrier. Glomerular filtration is the major mode of 
excretion, and plasma levels of these drugs are greatly affected by changes 
in renal function. Excretion of aminoglycosides is directly proportional to 
creatinine clearance. With normal renal function, the elimination half-life 
of aminoglycosides is 2–3 h. Dosage adjustments must be made in renal 
insufficiency to prevent toxic accumulation. Monitoring of plasma levels of 
aminoglycosides is important for safe and effective dosage selection and 
adjustment. For traditional dosing regimens (2 or 3 times daily), peak 
serum levels are measured 30–60 min after administration and trough levels 
just before the next dose. With once-daily dosing, peak levels are less 
important since they will naturally be high.
    </div>

    <div id="fluoroquinolones">
  The fluoroquinolones interfere with bacterial DNA synthesis by inhibiting 
topoisomerase II (DNA gyrase), especially in gram-negative organisms and 
topoisomerase IV, especially in gram-positive organisms. They block the 
relaxation of supercoiled DNA that is catalyzed by DNA gyrase, a step 
required for normal transcription and duplication. Inhibition of 
topoisomerase IV by fluoroquinolones interferes with the separation of 
replicated chromosomal DNA during cell division. Fluoroquinolones are 
usually bactericidal against susceptible organisms. Like aminoglycosides, 
the fluoroquinolones exhibit postantibiotic effects, whereby bacterial 
growth continues to be inhibited even after the plasma concentration of the 
drug has fallen below the minimum inhibitory concentration of the bacterium
</div>

<div id="antimycobacterials">
Drugs for Tuberculosis

The major drugs used in tuberculosis are isoniazid (INH), rifampin, 
ethambutol, pyrazinamide, and streptomycin. Actions of these agents on M 
tuberculosis are bactericidal or bacteriostatic depending on drug 
concentration and strain susceptibility. Appropriate drug treatment 
involves antibiotic susceptibility testing of mycobacterial isolates. 
Initiation of treatment of pulmonary tuberculosis usually involves a 3- or 
4-drug combination regimen depending on the known or anticipated rate of 
resistance to isoniazid (INH). Directly observed therapy (DOT) regimens are 
recommended in noncompliant patients and in drug-resistant tuberculosis.
 </div>  

        </div>

Answer 1

我建议使用jquery

有一些插件可以很容易地使用哈希：

http://www.asual.com/jquery/address/

http://benalman.com/projects/jquery-bbq-plugin/

Answer 2

使用 CSS。将所有内部 div 嵌套到一个容器中，并向该 div 添加一个类或 id 属性。例如：

<div id="container">
    <div id="introduction">asdfasdfasdfasd</div>
    <div id="fluoroquinolones">more stuff</div>
</div>

默认情况下，将所有嵌套的 div 显示为无

<style type="css/text">
    #container div { display: none; }
</style>

我还建议将标识符附加到包含链接的列表中。并使用 JavaScript，因此当您单击链接时，它将打开。我会推荐 JQuery 以加快开发速度和简化开发。

您可以使用 JavaScript 命令选择所有元素，如下所示：

document.getElementById("test").getElementsByTagName("a")

并添加一个 onclick 来打开选定的 div 元素，但关闭其他所有元素（更改 CSS 显示）。

-- 编辑：示例 JavaScript

<script type="javascript/text">
var x = document.getElementById("test").getElementsByTagName("a");
var last = "";
for (i in x) {
    x[i].onclick = function(e) {
        var current = this.hash.substr(1);
        if (last!="")
            document.getElementById(last).style.display = "none";
        document.getElementById(this.hash.substr(1)).style.display = "block";
        last = current;
        e.preventDefault();
        return false;
    };
}
</script>

这假设您使用 id “test”标识了列表元素容器。

使用 JQuery 将节省大量击键。

-- 用小提琴编辑：http: //jsfiddle.net/7B9sP/

Answer 3

用这个：

$(document).ready(function() {
    $('li a').click(function() {
        var getID = $(this).attr('href');
        $('.alldivs').fadeOut();
        $(getID).fadeIn();
        // or $(getID).slideDown();
        // or something you want. see in jquery.com
        // don't forget to use a plugin jquery in you head page html.
        return false;
    });
});

div“介绍”，赋值class="alldivs"为隐藏然后显示选中的div。我希望我有所帮助。

Answer 4

    <div>
        <ul>
            <li><a name="introduction" href="#introduction">Introduction to antimicrobials</a></li>
            <li><a name="introduction" href="#antifungals">Antifungal Drugs</a></li>
        </ul>

        <div id="introduction" class="description">
            Viruses: Smallest pathogens, programmed to infect only certain 
            body cells. Virus uses a body cells to reproduce itself it cannot be 
            treated with medication.
        </div>

        <div id="antifungals" class="description">
            Amphotericin B continues to be an important drug for the treatment of 
             systemic fungal infections. However, several azoles and echinocandins are 
             proving to be just as effective in some systemic mycoses with less risk of 
             toxic effects.
        </div>
     </div>

现在考虑这是您的 html，然后添加以下 CSS

   .description {
       display: none;
    }

    .displaying {
       display: block;
    }

然后在您的正文中添加以下 jquery 代码。确保在页面上导入 jquery 库。

  $('.data-link').on('click', function(event) {
     var id = $(this).attr('name');
     if($('#' + id).hasClass('description')) {
        $('#' + id).removeClass('description').addClass('displaying');
      } else {
        $('#' + id).removeClass('displaying').addClass('description');
      }
   });

我写了一个简单的 jsfiddle 来证明这一点。

http://jsfiddle.net/kG9wn/

如果再次单击，该代码也会隐藏 div。