Как получить jquery, чтобы конверт и изображение PDF отображались на моей странице? - PullRequest
Новая
       4

Как получить jquery, чтобы конверт и изображение PDF отображались на моей странице?

0 голосов
/ 23 апреля 2020

Я новичок, пытающийся выучить jquery из книги (pdf). Книга, из которой я учусь, записала какой-то код, он, похоже, сработал для него, поскольку результат его снимка подтверждает, что, но я не получаю тот же результат, хотя я скопировал его код в свой, и он все еще не работал , Ниже мой код. 

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="CSS 1.css">
            <script src="jquery-3.5.0.min.js"></script>
            <script src="JQ 1.js"></script>
            <title>Nested Unordered List For Navigation - Books</title>
        </head>

        <body>
            <ul id="selected-plays">
                <li>Comedies
                    <ul>
                        <li><a href="/asyoulikeit/">As You Like It</a></li>
                        <li>All's Well That Ends Well</li>
                        <li>A Midsummer Night's Dream</li>
                        <li>Twelfth Night</li>
                    </ul>
                </li>
                <li>Tragedies
                    <ul>
                        <li><a href="hamlet.pdf">Hamlet</a></li>
                        <li>Macbeth</li>
                        <li>Romeo and Juliet</li>
                    </ul>   
                </li>            
                <li>History
                    <ul>
                        <li>Henry IV<a href="mailto:henryiv@king.co.uk">(email)</a>             
                            <ul>
                                <li>Part I</li>
                                <li>Part II</li>
                            </ul>
                        </li>
                        <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
                        <li>Richard II</li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>

CSS

    .horizontal {
        float: left;
        list-style: none;
        margin: 10px;
    }
    .sub-level {
        background: #ccc;
    }

    a {
        color: #00c;
    }

    a.mailto {
        background: url(images/email.png) no-repeat right top;
        padding-right: 18px;

    }

    a.pdflink {
        background: url(images/pdf.png) no-repeat right top;
        padding-right: 18px;
    }
    a.henrylink {
        background-color: #fff;
        padding: 2px;
        border: 1px solid #000;
    }

JQUERY


$(document).ready(
    function() {
        $('#selected-plays > li').addClass('horizontal');
        $('#selected-plays li:not(.horizontal)').addClass('sub-level');
    }
);

$(document).ready(
    function() {
        $('a[href^="mailto:"]').addClass('mailto');
        $('a[href$=".pdf"]').addClass('pdflink');
});
.horizontal {
        float: left;
        list-style: none;
        margin: 10px;
    }
    .sub-level {
        background: #ccc;
    }

    a {
        color: #00c;
    }

    a.mailto {
        background: url(images/email.png) no-repeat right top;
        padding-right: 18px;

    }

    a.pdflink {
        background: url(images/pdf.png) no-repeat right top;
        padding-right: 18px;
    }
    a.henrylink {
        background-color: #fff;
        padding: 2px;
        border: 1px solid #000;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="CSS 1.css">
            <script src="jquery-3.5.0.min.js"></script>
            <script src="JQ 1.js"></script>
            <title>Nested Unordered List For Navigation - Books</title>
        </head>

        <body>
            <ul id="selected-plays">
                <li>Comedies
                    <ul>
                        <li><a href="/asyoulikeit/">As You Like It</a></li>
                        <li>All's Well That Ends Well</li>
                        <li>A Midsummer Night's Dream</li>
                        <li>Twelfth Night</li>
                    </ul>
                </li>
                <li>Tragedies
                    <ul>
                        <li><a href="hamlet.pdf">Hamlet</a></li>
                        <li>Macbeth</li>
                        <li>Romeo and Juliet</li>
                    </ul>   
                </li>            
                <li>History
                    <ul>
                        <li>Henry IV<a href="mailto:henryiv@king.co.uk">(email)</a>             
                            <ul>
                                <li>Part I</li>
                                <li>Part II</li>
                            </ul>
                        </li>
                        <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
                        <li>Richard II</li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>
$(document).ready(
    function() {
        $('#selected-plays > li').addClass('horizontal');
        $('#selected-plays li:not(.horizontal)').addClass('sub-level');
    }
);

$(document).ready(
    function() {
        $('a[href^="mailto:"]').addClass('mailto');
        $('a[href$=".pdf"]').addClass('pdflink');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...