html - 同じページで Web ページを開くための順序付きリスト 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 - 同じページで Web ページを開くための順序付きリスト Html ページ タブ

3 に答える 3

Related

Reference

html - 同じページで Web ページを開くための順序付きリスト Html ページタブ