1. 首頁
  2. 問答
  3. 有序列表Html頁面選項卡在同一頁面打開網頁

有序列表Html頁面選項卡在同一頁面打開網頁

2012-12-12 43 views
0

因此，我正在構建一個網站，我希望在右側有一些小標籤，可以更改主頁上的內容，而無需刷新整個頁面，就像主頁面中的嵌入式頁面一樣。我正在使用模板（HTML和CS）並嘗試修改現有內容。在代碼中，您可以注意到有一個定義按鈕的有序列表（如主頁等），當它們盤旋時，它們改變背景並看起來很花哨，但它們實際上並沒有做任何事情。我一直在閱讀如何讓他們改變頁面（通過下面的鏈接），但我很困惑，不知道如何去做。我希望你們能幫助我。我對HTML和CSS非常不感興趣，只是試圖把東西放在一起，並從示例中學習，同時也構建了一個私有網站。提前謝謝你的幫助！有序列表Html頁面選項卡在同一頁面打開網頁

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 [email protected] 
        </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; 
}

來源

2012-12-12 Vladislav Reshetnyak

+1

你問在用戶懸停在鏈接上時如何製作頁面重定向？ – TNCodeMonkey

+0

實際上，我不想打包來點擊其中一個標籤，其餘的頁面將被重定向到另一個頁面。讓我直觀地展示給你： 這是主頁：http://i.imgur.com/Lv1T7.png 當我點擊，讓我們說，發行版按鈕，你會得到這個：http：//我。 imgur.com/Qzekt.png –

+0

我明白你的意思。在jsfiddle.net上做一個jsfiddle幷包含有問題的元素，然後我可以幫助您在協作論壇中解決您的問題。儘量減少顯示的代碼，以便閱讀更容易，未來的問題很可能會產生更好的結果。 –

回答

1

如果你正在尋找一種方式來加載鼠標懸停上的內容，這裏是我的建議：

使用一點點'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

來源

2012-12-12 03:21:45 TNCodeMonkey

+0

哇這很酷，但我寧願不進入像AJAX那樣複雜的東西。我只是一個初學者，並試圖設置一些東西，使其工作。儘管我認爲它的效果很好，看起來不錯，但是感謝您提供了很好的建議。 –

+0

@litebread謝謝你的客氣話。然後，只需預加載內容，隱藏初始隱藏程序，在鏈接的href中添加「#DIVID」，然後基於該鏈接顯示/隱藏也可以很好地工作。 我只是一個AJAX類型的傢伙，我猜想:)。 – TNCodeMonkey

+0

嘿嘿沒問題我努力做到很好，因爲我從經常被欣賞的人那裏接受幫助。關於你的方向，我將不得不看看所有的。我是一個小白菜。不過我會按照你的建議。 –

1

如果我是你，我會在你最初隱藏的元素使用CSS屬性

display: none;

，然後使用jQuery的

.toggle()

當用戶點擊鏈接時淡入元素的方法。如在

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

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

來源

2012-12-12 03:27:42

+0

老實說，我幾乎不知道divs，我對此很新。這是一些激烈的工作，我雖然會更容易實施。我想我需要更多地學習HTML和CSS，並正確地學習如何做到這一點。 –

3 
<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 [email protected] 
        </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; 
}

注意：改變＃內容類類型..

來源

2012-12-12 03:38:14 cheeseburger

+0

'注意：將#content更改爲班級類型..' 你是什麼意思？ –

+0

因爲我多次使用#content，所以我將其更改爲.content以使其成爲全局。 :) – cheeseburger

+0

噢好吧，以及我已經嘗試過，但似乎沒有發生。難道我做錯了什麼。我已將該腳本添加到HTML頁面的開頭，並將HTML部分替換爲您的HTML部分。我也添加了CSS剪輯，但沒有改變。 –

相關問題

 相關問題