Question

所以我正在构建一个网站，我希望在右侧有一些标签可以更改主页面上的内容，而无需刷新整个页面，就像主页面中的嵌入页面一样。我正在使用模板（HTML和CS）并尝试修改现有内容。在代码中你可以注意到有一个定义按钮的有序列表（如主页等），当它们悬停在它们上面时会改变背景并看起来很花哨，但它们实际上并没有做任何事情。我一直在阅读如何让他们改变页面（通过链接），但我很困惑，无法弄清楚如何做到这一点。我希望你们能帮助我。我对HTML和CSS非常不感兴趣，只是尝试将一些东西放在一起并从示例中学习，同时建立一个私有站点。感谢您的帮助！

INDEX.HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>/rootbox</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
    <div id="header-wrapper">
        <div id="header" class="container">
            <div id="logo">
                <h1><a href="#">Rootbox</a></h1>
            </div>
            <div id="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Homepage</a></li>
                    <li><a href="#">Distros</a></li>
                    <li><a href="#">Wifi</a></li>
                    <li><a href="#">Tools</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div id="banner">
            <div class="content"><img src="images/title.png" width="1000" height="300" alt="" /></div>
        </div>
    </div>
    <!-- end #header -->

    <div id="page">
        <div id="content">
            <div class="post">
                <h2 class="title"><a href="#">Welcome to /rootbox</a></h2>
                <div style="clear: both;">&nbsp;</div>
                <div class="entry">
                    <p>/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
                    </br></br>
                    This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go <a href="http://pancake.io">here</a>.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010@gmail.com.
                    </p>
                </div>
            </div>
        </div>
    </div>
        <!-- end #content -->
</div>
<div id="footer">
    <p>Copyright (c) 2012. All rights reserved. Design by <a href="http://www.freecsstemplates.org">FCT</a></p>
</div>
<!-- end #footer -->
</body>
</html>

的style.css

body {
    margin: 0;
    padding: 0;
    background: #050505 url(images/img01.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #5B5B5B;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'Oswald', sans-serif;
    font-weight: 200;
    color: #222222;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 2.8em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    line-height: 180%;
}

ul, ol {
}

a {
    color: #5E5E5E;
}

a:hover {
}

#wrapper {
    background: #FFFFFF url(images/img05.jpg) repeat;
}

.container {
    width: 1000px;
    margin: 0px auto;
}

/* Header */

#header-wrapper {
    overflow: hidden;
}

#header {
    width: 1000px;
    height: 150px;
    margin: 0 auto;
    padding: 0px 0px;
}

/* Logo */

#logo {
    float: left;
    width: 300px;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
}

#logo h1, #logo p {
}

#logo h1 {
    line-height: 120px;
    letter-spacing: -2px;
    font-size: 3.8em;
}

#logo h1 a {
    color: #1F1F1F;
    text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}

#logo p {
    margin: 0;
    padding: 0px 0 0 0px;
    letter-spacing: -1px;
    font: normal 18px Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    color: #8E8E8E;
}

#logo p a {
    color: #8E8E8E;
}

#logo a {
    border: none;
    background: none;
    text-decoration: none;
    color: #000000;
}

/* Splash */

#splash {
    width: 960px;
    height: 300px;
    margin: 0px auto;
}

/* Search */

#search {
    float: right;
    width: 280px;
    height: 60px;
    padding: 20px 0px 0px 0px;
}

#search form {
    height: 41px;
    margin: 0;
    padding: 10px 0 0 20px;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search-text {
    width: 170px;
    padding: 6px 5px 2px 5px;
    border: 1px solid #E7EBED;
    background: #FFFFFF;
    text-transform: lowercase;
    font: normal 11px Arial, Helvetica, sans-serif;
    color: #5D781D;
}

#search-submit {
    width: 50px;
    height: 22px;
    border: none;
    background: #B9B9B9;
    color: #000000;
}

/* Menu */

#menu {
    float: right;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
}

#menu ul {
    float: right;
    margin: 0;
    padding: 20px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: right;
}

#menu a {
    display: block;
    line-height: 100px;
    margin-right: 1px;
    padding: 0px 20px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px rgba(0,0,0,.2);
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #1F1F1F;
    border: none;
}

#menu a:hover, #menu .current_page_item a {
    background: url(images/img01.jpg) repeat;
    text-decoration: none;
    color: #FFFFFF;
}

#menu .current_page_item a {
}

/* Page */

#page {
    width: 1000px;
    margin: 0 auto;
    padding: 30px 0px;
}

/* Content */

#content {


    padding: 0px 0px 0px 0px;
}

.post {
    overflow: hidden;
    margin-bottom: 40px;
    border-bottom: 1px solid #E7EBED;
}

.post .title {
    padding: 0px 0px 0px 0px;
    letter-spacing: -1px;
}

.post .title a {
    border: none;
    text-decoration: none;
    color: #222222;
}

.post .meta {
    margin-bottom: 30px;
    padding: 10px 0px 0px 0px;
    text-align: left;
    font-family: 'Abel', sans-serif;
    font-size: 16px;
    font-weight: 300;
}

.post .meta .date {
    float: left;
}

.post .meta .posted {
    float: right;
}

.post .meta a {
}

.post .entry {
    padding: 0px 0px 40px 0px;
    text-align: justify;
}

.links {
    padding-top: 20px;
    margin-bottom: 30px;
}

.more {
    display: block;
    float: left;
    width: 88px;
    padding: 5px 5px;
    margin-right: 10px;
    background: #222222;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}

.comments {
    display: block;
    float: left;
    width: 88px;
    padding: 5px 5px;
    background: #222222;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
}

/* Sidebar */

#sidebar {
    float: left;
    width: 270px;
    margin: 0px;
    padding: 30px 0px 0px 0px;
}

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

#sidebar li {
    margin: 0;
    padding: 0;
}

#sidebar li ul {
    margin: 0px 0px;
    padding-bottom: 30px;
}

#sidebar li li {
    line-height: 40px;
    border-bottom: 1px solid #E7EBED;
    margin: 0px 0px;
    border-left: none;
}

#sidebar li li span {
    display: block;
    margin-top: -20px;
    padding: 0;
    font-size: 11px;
    font-style: italic;
}

#sidebar li li a {
    padding: 0px 0px 0px 20px;
    background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar h2 {
    height: 38px;
    padding: 0px 0px 30px 0px;
    letter-spacing: -.5px;
    font-size: 1.8em;
    color: #222222;
}

#sidebar p {
    margin: 0 0px;
    padding: 0px 30px 20px 30px;
    text-align: justify;
}

#sidebar a {
    border: none;
}

#sidebar a:hover {
    text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
    padding: 20px;
}

#calendar table {
    width: 100%;
}

#calendar tbody td {
    text-align: center;
}

#calendar #next {
    text-align: right;
}

/* Three Column Footer Content */

#footer-content {
    overflow: hidden;
    width: 1000px;
    margin: 0px auto;
    color: #D6E2F0;
}

#footer-content a {
    color: #92A9B6;
}

#footer-bg {
    overflow: hidden;
    padding: 30px 0px;
    background: #E8E8E8;
}

#footer-content h2 {
    margin: 0px;
    padding: 0px 0px 20px 0px;
    letter-spacing: -1px;
    font-size: 26px;
    color: #262626;
}


#footer-content #fbox1 {
    float: left;
    width: 300px;
    margin-right: 50px;
}

#footer-content #fbox2 {
    float: left;
    width: 300px;
}

#footer-content #fbox3 {
    float: right;
    width: 300px;
}

#footer-content a {
}

#column1 {
    float: left;
    width: 290px;
    margin-right: 30px;
}

#column2 {
    float: left;
    width: 280px;
}

#column3 {
    float: right;
    width: 260px;
}

/* Footer */

#footer {
    height: 140px;
    margin: 0 auto;
    padding: 50px 0 15px 0;
    font-family: 'Abel', sans-serif;
}

#footer p {
    margin: 0;
    padding-top: 10px;
    letter-spacing: 1px;
    line-height: normal;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    color: #5E5E5E;
}

#footer a {
    color: #5E5E5E;
}

#marketing {
    overflow: hidden;
    margin-bottom: 30px;
    padding: 20px 0px 10px 0px;
    border-top: 1px solid #E7EBED;
    border-bottom: 1px solid #E7EBED;
}

#marketing .text1 {
    float: left;
    margin: 0px;
    padding: 0px;
    letter-spacing: -2px;
    text-transform: lowercase;
    font-size: 34px;
    color: #345E9B;
}

#marketing .text2 {
    float: right;
}

#marketing .text2 a {
    display: block;
    width: 252px;
    height: 38px;
    padding: 15px 0px 0px 0px;
    background: url(images/img07.jpg) no-repeat left top;
    letter-spacing: -2px;
    text-align: center;
    text-transform: lowercase;
    font-size: 30px;
    color: #FFFFFF;
}

#banner {
    margin: 0px auto;
    width: 1000px;
    height: 340px;
    background: url(images/img03.png) no-repeat left bottom;
}

#banner .content {
}


.list-style1 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.list-style1 a {
    color: #7F7F7F;
}

Answer 1

<script type='text/javascript'>  
    $(document).ready(function() {
                $('#menu #tab1').on('mouseover', function () {
                    $('#page').show();
                    $('#page2,#page3,#page4,#page5').hide();    
                }); 
                $('#menu #tab2').on('mouseover', function () {
                    $('#page2').show();
                    $('#page,#page3,#page4,#page5').hide(); 
                });
                $('#menu #tab3').on('mouseover', function () {
                    $('#page3').show();
                    $('#page,#page2,#page4,#page5').hide(); 
                });
                $('#menu #tab4').on('mouseover', function () {
                    $('#page4').show();
                    $('#page,#page2,#page3,#page5').hide(); 
                });
                $('#menu #tab5').on('mouseover', function () {
                    $('#page5').show();
                    $('#page,#page2,#page3,#page4').hide(); 
                });

    });
</script>

在你的脚本和html上试试这个..

<div id="wrapper">
    <div id="header-wrapper">
        <div id="header" class="container">
            <div id="logo">
                <h1><a href="#">Rootbox</a></h1>
            </div>
            <div id="menu">
                <ul>
                    <li class="current_page_item" id="tab1"><a href="#">Homepage</a></li>
                    <li id="tab2"><a href="#">Distros</a></li>
                    <li id="tab3"><a href="#">Wifi</a></li>
                    <li id="tab4"><a href="#">Tools</a></li>
                    <li id="tab5"><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div id="banner">
            <div class="content"><img src="images/title.png" width="1000" height="300" alt="" /></div>
        </div>
    </div>
    <!-- end #header -->

    <div id="page">
        <div class="content">
            <div class="post">
                <h2 class="title"><a href="#">Welcome to /rootbox</a></h2>
                <div style="clear: both;">&nbsp;</div>
                <div class="entry">
                    <p>/rootbox is a collection of Security oriented Tools, Tutorials, Resources and Websites.This site offers a collection of well documented and freely available tools and resources for both a begginer pen-tester and the professional white-hat. Everything on this site is simply a collection, thus no original content is posted. All links have been tested and properly checked for security. All software published here is free and available directly from the author's site. Tutorials are often updated and deprecated software is removed.
                    </br></br>
                    This site is hosted on Panckake.io - A web framework which allows for publishing websites directly from Dropbox. For more information go <a href="http://pancake.io">here</a>.If you need any additional help, or have any feedback or suggestions, send an email to rushone2010@gmail.com.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div id="page2">
        <div class="content">
            <div class="post">
                <h2 class="title"><a href="#">page2</a></h2>
            </div>
        </div>
    </div>
     <div id="page3">
        <div class="content">
            <div class="post">
                <h2 class="title"><a href="#">page3</a></h2>
            </div>
        </div>
    </div>
    <div id="page4">
        <div class="content">
            <div class="post">
                <h2 class="title"><a href="#">page4</a></h2>
            </div>
        </div>
    </div>
    <div id="page5">
        <div class="content">
            <div class="post">
                <h2 class="title"><a href="#">page5</a></h2>
            </div>
        </div>
    </div>
</div>

将此添加到您的风格..

#page2, #page3, #page4, #page5{
display:none;
    width: 1000px;
    margin: 0 auto;
    padding: 30px 0px;
}

注意：将#content更改为类类型..

Answer 2

如果您正在寻找一种在鼠标悬停时加载内容的方法，我建议这样做：

使用一点点jQuery和AJAX：

$("#menu a").on("mouseover",function(){
//Get url of link
var url = $(this).attr('href');
//Perform ajax call to said link
$.ajax(
    {
    url:"/echo/json",
    success:function(data){
        //USED FOR MOCKING PURPOSES ONLY
       data = exampleContent; 

        //Append the data to your content wrapper
        $("#page #content").html(data[url]);
    }
});
});

<强> Here is a working example

<强> This is a fancier version with fading. I call that a splash of awesome

Answer 3

如果我是你，我会使用css属性

display: none;

关于您最初隐藏的元素，然后使用jquery＆＃39;

.toggle()

用户点击链接时淡入元素的方法。如在

$('.target').toggle();

其中target是您的div id的名称。

订购列表Html页面选项卡在同一页面中打开网页

3 个答案: