打开特定DIV中的链接

时间：2016-03-17 05:47:48

标签： javascript html css

我在DIV（包装器）中使用菜单。现在我想在另一个DIV（TEST）的菜单中打开链接。到目前为止，我发现只有iframe这种方法（不太好）。还有其他解决方案 - 可能使用javascript（但没有ajax或php）？

非常感谢！

最好的问候，Ronny 

body { margin:0; background-color: #333333;}
    
    .wrapper{
    	width: 960px; 
    	margin: 0 auto; 
    	position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* background: url("ronny_logo.jpg"); */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index: 10;
    	margin-top: 120px;
    }
    
    
    /* MENU */
    #main_menu{
        margin:0px;
    	padding:0;
        height: 150px;
    	/* width: 100%;      /* Breite vom Hauptmenü Container */
        padding: 0px 0;
        /*overflow: hidden; Remove this*/
    	position: fixed;
    	background-color: black;
        z-index: 2;
    }
    #main_menu li{
        list-style: none;
        float: left;
        line-height: 30px;
        margin-left: 10px;
        width: 130px;
        text-align: center;
        margin-top: 120px;
        position: relative;
    }
    #main_menu li a, #footer_menu li a {
        color: #FFFFFF;
        text-shadow: 0px 1px 1px #000;
        display: block;
        font-family: 'PT Sans', sans-serif;
        text-decoration: none;
        font-size: 12pt;
    }
    #main_menu .logo{
        background: none;
        width: 445px;
        margin: 0;
    }
    #main_menu li a:hover, #footer_menu li a:hover{
        text-decoration: underline;
    }
    #main_menu li .submenu{
        display: none;
        margin: 0;
        padding: 0;
        z-index: 10;
        position: absolute;
        left: 0;
        top:100%;
    }
    #main_menu li .submenu:hover{
        display: block;
    }
    #main_menu li a:hover + .submenu{
        display: block;
    }
    #main_menu li .submenu li{
        margin: 0;
        padding: 0;
    }
    #main_menu li .submenu li a{
        font-size: 9pt;
    }
    /* COLORS */
    .red, .red .submenu{ background-color: #ed3327; }
    .blue, .blue .submenu{ background-color: #9dbdd5; }
    .green, .green .submenu{ background-color: #6fb145; }
    .orange, .orange .submenu{ background-color: #f5832e; }
    .yellow, .yellow .submenu{ background-color: #f6ec35; }
    

    
    .TEST{
    	width: 960px; 
    	margin: 0 auto; 
        font-size: 19pt;
    	color: #FF0000;
        z-index: 10;
    	margin-top: 120px;
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>R.O.N.N.Y | Containertest</title>
    <META NAME="author" CONTENT="R.O.N.N.Y">
    <META NAME="publisher" CONTENT="R.O.N.N.Y">
    <META NAME="description" CONTENT="Ulla Neugebauer, Das Presshaus, Neugeboren in Hebammenhand, Ladendorf, Hebamme">
    <META HTTP-EQUIV="reply to" CONTENT="">
    <META NAME="language" CONTENT="de">
    <META NAME="keywords" CONTENT="Neugebauer, Ulla, Hebamme, Geburt, Ladendorf, Presshaus, Neugeboren, Hebammenhand, dasPresshaus">
    <META NAME="robots" CONTENT="index">
    <META NAME="page-topic" CONTENT="Geburt, Hebamme, Gesundheit, sonstiges">
    <META NAME="audience" CONTENT="alle, anfänger, azubis, erwachsene, experten, fans, fortgeschrittene, frauen, jugendliche, kinder, profis, schüler, studenten">
    <META NAME="revisit-after" CONTENT="01 month">
    <link rel="SHORTCUT ICON" href="favicon.ico" />
    
    </head>
    
    <body>
    <div class="wrapper">
        
            
                <ul id="main_menu">
                    <li class="logo">
                        <a href="#">
                            <img src="ronny_logo.jpg" alt="Logo"/>
                        </a>
                    </li>
                    <li class="red">
                        <a href="#">Home</a>
                    </li>
                    <li class="green">
                        <a href="#">Evenementen</a>
                        <ul class="submenu">
                            <li>
                                <a href="http://www.a1.net" target="irgendwas">Item</a>
                            </li>
                            <li>
                                <a href="#">Item</a>
                            </li>
                            <li>
                                <a href="#">Item</a>
                            </li>
                        </ul>
                    </li>
                    <li class="blue">
                        <a href="#">Bus</a>
    
                    </li>
                    <li class="orange">
                         <a href="contact.html" target="irgendwas">Contact</a>
                    </li>
                </ul>
      </div>      
        
        <div class="TEST">
            	
    				<iframe src="home.html" style="width:300px; height:600px;" frameborder="0" name="irgendwas"></iframe>
    				
    				
    					<p>fadsfdsfdas</p>
    			<p>dfsadfaf</p>
    			<p>d</p>
    			<p>d</p>
    			<p>d</p>
    			<p>d</p>
    			<p>&nbsp;</p>
    			<p>gg</p>
    			<p>&nbsp;</p>
    			<p>g</p>
    			<p>g</p>
    			<p>g</p>
    			<p>&nbsp;</p>
    			<p>g</p>
    			<p>g</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>g</p>
    			<p>h</p>
    			<p>h</p>
    			<p>h</p>
    			<p>h</p>
    			<p>h</p>
    			<p>&nbsp;</p>
    			<p>h</p>
    			<p>h</p>
    			<p>h</p>
    			<p>h</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>g</p>
    			<p>&nbsp;</p>
    			<p>g</p>
    			<p>g</p>
            
        </div>
    
    
    
    
    </body>
    </html>

lookout http://i67.tinypic.com/kbegro.jpg

1 个答案:

答案 0 :(得分：1)

这可能会或可能不会解决您的问题，但您可以使用jquery将外部html文件（或其中的部分）加载到div中。这将在以下链接中讨论，并由@Giliweed

回答

How do I load an HTML page in a <div> using JavaScript? 

function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

干杯

相关问题
最新问题