-1

2 つの html ファイルと 1 つの css ファイルがあります。私の質問は、私のセクションの同じページまたはウィンドウでリンク monday.html を開く方法です。つまり、mondy ナビゲーション ボタンを 1 回クリックすると、lorem ipsum が表示されているコンテンツに結果が表示されます。

/これは index.html ファイルです

<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
        <h1>Welcome to My page</h1>

        <div id="content">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a felis. Sed ac mauris eget 
            eros vestibulum luctus. Phasellus ultrices consequat arcu. Aliquam rhoncus, elit nec faucibus
            scelerisque, nisi ligula imperdiet dui, in lacinia nulla odio sit amet lorem. Praesent tristique, 
            orci ac posuere rhoncus, massa urna semper purus, et tempus justo massa a massa. Cras nec turpis
            non massa lacinia facilisis. Phasellus gravida nisl eget metus. Fusce gravida, dui ac accumsan
            sagittis, nisl quam interdum tortor, sed gravida risus lectus eget dui. Aliquam vitae justo ac 
            risus gravida convallis. Nulla quis diam a mi aliquam tempor. Duis dignissim erat vitae nisl. 
            Fusce vel lorem. Duis neque dolor, tempor nec, cursus id, convallis in, enim. Morbi egestas 
            lobortis neque.</p>
        </div>
        <div id="sidebar">
            <h2>Weekdays</h2>
            <ul>
                <li><a  href="monday.html">Monday</a></li>
                <li>Tuesday</li>
                <li>Wednesday</li>
                <li>Thursday</li>
                <li>Friday</li>
                <li>Saturday</li>
                <li>Sunday</li>
            </ul>
        </div>
        <div id="footer">
            <p>Copyright &copy; MyPage</p>
        </div>
    </div>
</body>
</html>



my css code is as follows:-
/*
Mypage css file
*/

body {
    margin: 0;
    padding: 0;
    background: #cfcdb4;
    border-top: 10px solid #bcba9e;
    font-family: Helvetica, sans-serif;
    color: #fff;
}

p {
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.2em;
}

h2 {
    margin: 0;
    color: #6d8ead;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#wrap {
    margin: 0 auto;
    width: 800px;
    background: #362416;
    border-left: 5px solid #281a0f;
    border-right: 5px solid #281a0f;
}

#wrap h1 {
    margin: 0;
    padding: 10px;
    text-align: center;
    background: #553f2d;
    border-bottom: 1px solid #362416;
    color: #fff;
    font-weight: normal;
    font-family: Georgia, serif;
}


#content {
    margin: 20px 0 0 0;
    float: left;
    width: 500px;
    padding: 0 15px 0 15px;
}

#content h2 {
    margin: 0 0 10px 0;
    font-size: xx-large;
}

#sidebar {
    float: right;
    width: 260px;
    margin: 20px 0 0 0;
}

#sidebar ul {
    margin: 0 0 0 10px;
}

#sidebar ul li {
    margin: 0 0 10px 0;
}

#sidebar h2 {
    background: #553f2d;
    margin: 0 0 10px 0;
    padding: 5px;
}

#footer {
    padding: 10px;
    clear: both;
    font-size: small;
}

#footer p {
    margin: 0;
    padding: 10px;
    background: #281a0f;
    text-align: center;
}



the hyperlink monday.html is as follows:-


<html>
    <head>
    <title>Monday</title>
    </head>
    <body>
    This is a monday page
    </body>
 <html>
4

2 に答える 2

0

私が考えることができる最も基本的な方法は、jquery を使用することです。

$('#sidebar a').click(function(e){
    e.preventDefault();
    var location = $(this).attr('href');
    $('#content').load(location);
});

ただし、より詳細な制御が必要な場合は、おそらく適切な ajax または $.get 関数を使用する必要があります

于 2013-09-04T09:48:05.670 に答える
-1

これを実現するには、AJAX を使用します。以下の素晴らしい記事をご覧ください。

http://css-tricks.com/ajax-load-container-contents/

于 2013-09-04T09:36:39.547 に答える