html - 有序列表 Html 页面选项卡以在同一页面中打开网页

Question

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

索引.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>

样式.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;
}

score 3 · Accepted Answer

<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更改为类类型..

score 1 · Accepted Answer

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

使用一点点 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]);
    }
});
});

这是一个工作示例

这是一个带有褪色的更高级的版本。我称之为很棒的飞溅

score 1 · Accepted Answer

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

display: none;

在您最初隐藏的元素上，然后使用 jquery

.toggle()

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

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

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

html - 有序列表 Html 页面选项卡以在同一页面中打开网页

3 回答 3

Related

Reference