-1

这是两个html文件和一个css文件。我的问题是如何在我的部分的同一页面或窗口上打开链接 monday.html。即，当单击 mondy 导航按钮时，会在显示 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 回答