1. 首页
  2. 问答
  3. 有序列表Html页面选项卡在同一页面打开网页

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

2012-12-12 42 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剪辑，但没有改变。 –

相关问题

 相关问题