使用html，div标签和CSS的onclick函数
[英]onclick function using html, div tags and css
问题描述
I'm trying to get these: 
我正在尝试获得这些：
<div id="navi"><br>
<a href="index.htm">Home</a><br>
<a href ="#" onClick="load_venues(); return false; ">venues</a><br>
<a href ="#" onClick="load_goals(); return false; ">Our Goals</a><br>
<a href ="#" onClick="load_rules(); return false; ">Rule Book</a><br>
<a href ="#" onClick="load_formats(); return false; ">formats</a><br>
<a href ="#" onClick="load_contact(); return false; ">Contact</a></div>
to load into this: 加载到这个：
<div id="maindiv" class="divclass"></div>
this is my script: 这是我的脚本：
function load_home(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="home.htm" ></object>';}
function load_venues(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="venues.htm" ></object>';}
function load_goals(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="goals.htm" ></object>';}
function load_rules(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="rules.htm" ></object>';}
function load_formats(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="formats.htm" ></object>';}
function load_contact(){document.getElementById("maindiv").innerHTML='<object type="text/html" data="contact.htm" ></object>';}
I'm not the smartest, but I'm trying. 我不是最聪明的人，但我正在尝试。
It'll load into the div correctly, but it doesn't show the entire page that it loads, it'll show a 150x150px box of the content with scrollbars on both y and x axis. 它将正确加载到div中，但不会显示加载的整个页面，而是显示内容为150x150px的框，其中在y和x轴上均带有滚动条。 I want it to fill a box with these properties. 我希望它用这些属性填充一个框。
.divclass {
color: #420F4A;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 380;
line-height: 1.4;
overflow-y: auto;
overflow-x: hidden;
width: 567px;
height: 521px;
}
any advice is welcome :) 任何建议，欢迎:)
The website is http://www.pokerinforsterandtaree.com and if you go to the Contact section, you can see the thing that it's doing. 该网站为http://www.pokerinforsterandtaree.com ，如果您转到“联系”部分，则可以看到它正在执行的操作。
3 个解决方案
解决方案1
2 已采纳 2015-11-29 02:20:48
EDIT 1: try this code, OP. 编辑1：尝试此代码，OP。 Copy and paste it into your page. 复制并将其粘贴到您的页面中。
<!DOCTYPE html> <html> <head> <title>River Rat Poker League</title> <!-- use HTML5 please --> <meta charset="utf-8" /> <!-- place all of your external css below --> <link href="//pokerinforsterandtaree.com/stylesheet.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="//pokerinforsterandtaree.com/engine1/style.css" /> <style type="text/css"> object{ width:100% !important; height: 100% !important; } #maindiv{ text-align: center; } #menu{ list-style: none; } td img { display: block; } </style> </head> <body> <div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_print"></a> </div> <table width="989" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#cccccc"> <tr> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="120" height="1" border="0" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="20" height="1" border="0" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="340" height="1" border="0" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="227" height="1" border="0" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="20" height="1" border="0" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="262" height="1" border="0" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="1" border="0" alt="" /> </td> </tr> <tr> <td rowspan="2"> <img name="index_r1_c1" src="//pokerinforsterandtaree.com/img/1rr.jpg" width="120" height="71" border="0" id="index_r1_c1" alt="" /> </td> <td colspan="4"> <img name="index_r1_c2" src="//pokerinforsterandtaree.com/img/index_r1_c2.jpg" width="607" height="10" border="0" id="index_r1_c2" alt="" /> </td> <td rowspan="6"> <img name="index_r1_c6" src="//pokerinforsterandtaree.com/img/index_r1_c6.jpg" width="262" height="258" border="0" id="index_r1_c6" alt="" /> </td> <td> <img src="img/spacer.gif" width="1" height="10" border="0" alt="" /> </td> </tr> <tr> <td rowspan="2" colspan="4"><!-- Start WOWSlider.com BODY section --> <div id="wowslider-container1"> <div class="ws_images"> <ul> <li> <img src="//pokerinforsterandtaree.com/scroller/scroller1.jpg" alt="scroller1" title="scroller1" id="wows1_0"/> </li> <li> <img src="//pokerinforsterandtaree.com/scroller/scroller2.jpg" alt="scroller2" title="scroller2" id="wows1_1"/> </li> <li> <img src="//pokerinforsterandtaree.com/scroller/scroller3.jpg" alt="scroller3" title="scroller3" id="wows1_2"/> </li> <li> <img src="//pokerinforsterandtaree.com/scroller/scroller4.jpg" alt="scroller4" title="scroller4" id="wows1_3"/> </li> <li> <img src="//pokerinforsterandtaree.com/scroller/scroller5.jpg" alt="scroller5" title="scroller5" id="wows1_4"/> </li> <li> <img src="//pokerinforsterandtaree.com/scroller/scroller6.jpg" alt="scroller6" title="scroller6" id="wows1_5"/> </li> </ul> </div> <div class="ws_script" style="position:absolute;left:-99%"></div> <div class="ws_shadow"></div> </div> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="61" border="0" alt="" /> </td> </tr> <tr> <td rowspan="6" background="//pokerinforsterandtaree.com/img/1navi.jpg" class="navi" align="right"> <div id="topnav"> <ul id="menu"> <li> <a id="home" href="#"> Home</a> </li> <li> <a id="venues" href="#"> Venues</a> </li> <li> <a id="goals" href="#"> Our Goals</a> </li> <li> <a id="rules" href="#"> Rule Book</a> </li> <li> <a id="format" href="#"> Formats</a> </li> <li> <a id="contact" href="#"> Contact</a> </li> </ul> </div> </td> <td><img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="116" border="0" alt="" /></td> </tr> <tr> <td colspan="4"> <img name="index_r4_c2" src="//pokerinforsterandtaree.com/img/index_r4_c2.jpg" width="607" height="13" border="0" id="index_r4_c2" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="13" border="0" alt="" /> </td> </tr> <tr> <td colspan="4"> <img name="index_r5_c2" src="//pokerinforsterandtaree.com/img/index_r5_c2.jpg" width="607" height="20" border="0" id="index_r5_c2" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="20" border="0" alt="" /> </td> </tr> <tr> <td rowspan="6"> <img name="index_r6_c2" src="//pokerinforsterandtaree.com/img/index_r6_c2.jpg" width="20" height="521" border="0" id="index_r6_c2" alt="" /> </td> <td colspan="2" rowspan="6" valign="top" bgcolor="#FFFFFF"> <div id="maindiv" class="divclass"> <div class="fb-page" data-href="https://www.facebook.com/river.rats.mnc" data-width="547" data-height="521" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"></div> </div> </td> <td rowspan="6"> <img name="index_r6_c5" src="//pokerinforsterandtaree.com/img/index_r6_c5.jpg" width="20" height="521" border="0" id="index_r6_c5" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="38" border="0" alt="" /> </td> </tr> <tr> <td> <img name="index_r7_c6" src="maindivimg/index_r7_c6.jpg" width="262" height="30" border="0" id="index_r7_c6" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="30" border="0" alt="" /> </td> </tr> <tr> <td rowspan="4" align="left" valign="top" bgcolor="#FFFFFF"> <div class="rightbox"> <div class="rightbox2">Don't know how to play? Come to one of our games to find out.</div> </div> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="84" border="0" alt="" /> </td> </tr> <tr> <td> <img name="index_r9_c1" src="//pokerinforsterandtaree.com/img/index_r9_c1.jpg" width="120" height="48" border="0" id="index_r9_c1" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="48" border="0" alt="" /> </td> </tr> <tr> <td> <img name="index_r10_c1" src="//pokerinforsterandtaree.com/img/index_r10_c1.jpg" width="120" height="20" border="0" id="index_r10_c1" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="20" border="0" alt="" /> </td> </tr> <tr> <td align="right" valign="top" background="//pokerinforsterandtaree.com/img/1bottom.jpg"> <div class="lefttbox"> <div class="leftbox2"><img src="//pokerinforsterandtaree.com/img/1aussie.jpg" /> <a href="http://www.aussieholdempoker.com.au/" class="leftboxnavi">URL</a> - <a href="https://www.facebook.com/AussieHoldemPoker/" class="leftboxnavi">FB</a> </div> </div> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="301" border="0" alt="" /> </td> </tr> <tr> <td colspan="6"> <img name="index_r12_c1" src="//pokerinforsterandtaree.com/img/index_r12_c1.jpg" width="989" height="15" border="0" id="index_r12_c1" alt="" /> </td> <td> <img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="15" border="0" alt="" /> </td> </tr> <tr> <td colspan="3" align="left" class="footer"> <ul id="menu"> <li> <a id="home" href="#"> Home</a> </li> <li> <a id="venues" href="#"> Venues</a> </li> <li> <a id="goals" href="#"> Our Goals</a> </li> <li> <a id="rules" href="#"> Rule Book</a> </li> <li> <a id="format" href="#"> Formats</a> </li> <li> <a id="contact" href="#"> Contact</a> </li> </ul> </td> <td colspan="3" align="right" class="footer">2015 River Rat Poker League (C) Privacy Policy </td> <td><img src="//pokerinforsterandtaree.com/img/spacer.gif" width="1" height="50" border="0" alt="" /></td> </tr> </table> <script type="text/javascript" src="//pokerinforsterandtaree.com/engine1/jquery.js"></script> <!-- place all of your javascript below --> <script type="text/javascript" src="//pokerinforsterandtaree.com/engine1/wowslider.js"></script> <script type="text/javascript" src="//pokerinforsterandtaree.com/engine1/script.js"></script> <script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script> <script> //site var a2a_config = a2a_config || {}; a2a_config.linkname = "River Rat Poker League"; a2a_config.linkurl = "www.pokerinforsterandtaree.com.au"; //menu $(function(){ /* when you click any link in the list... */ $('#menu li a').click(function(){ /* ...will get its ID attribute wich must be the same as the name of the page you are trying to load, so... */ var elementId = $(this).attr('id'); /* we can bring its content to the DIV tag specified */ $('#maindiv').load(elementId + '.htm'); }); }); //facebook (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </body> </html>
Try using jQuery (don't try to reinvent the wheel): 尝试使用jQuery（不要尝试重新发明轮子）：
$(function(){ /* when you click any link in the list... */ $('#menu li a').click(function(){ /* ...will get its ID attribute wich must be the same as the name of the page you are trying to load, so... */ var elementId = $(this).attr('id'); /* we can bring its content to the DIV tag specified */ $('#result').load(elementId + '.html'); }); });
<ul id="menu"> <li> <a id="home" href="#"> Home</a> </li> <li> <a id="venues" href="#"> Venues</a> </li> <li> <a id="goals" href="#"> Our Goals</a> </li> <li> <a id="rules" href="#"> Rule Book</a> </li> <li> <a id="format" href="#"> Formats</a> </li> <li> <a id="contact" href="#"> Contact</a> </li> </ul> <!-- your pages will be loaded into the DIV tag below --> <div id="result"></div>
解决方案2
0 2015-11-29 01:32:19
You CSS is not working because you are not connecting the right object. 您的CSS无法正常工作，因为您没有连接正确的对象。 Try to edit with div#maindiv instead of div.maindiv in the CSS file. 尝试在CSS文件中使用div#maindiv而不是div.maindiv进行编辑。
解决方案3
0 2015-11-29 01:47:35
use #maindiv instead of .maindiv when do you want to get by id. 当您想通过ID获取时，请使用#maindiv而不是.maindiv。
# is id selector, . ＃是ID选择器。 is class selector 是类选择器
or you could assign a class to your div, 或者您可以为div分配一个类，
<div id="maindiv" class="divclass"
then you would be able to reach by class notation . 那么您就可以通过类符号到达。 as: 如：
.divclass {
color:..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
How to display div with same ID and OnClick function - Javascript, HTML and CSS - How to display div with same ID and OnClick function - Javascript, HTML and CSS
在HTML的输入标签内使用onclick事件来调用Javacscript函数 - Using onclick event inside input tags in HTML to call a Javacscript function
在javascript标记中使用onclick函数 - Using onclick function in javascript tags
使用javaScript函数onclick div替换HTML内容？ - Replace HTML content using javaScript function onclick div?
HTML CSS JS - OnClick 仅工作 1 div - HTML CSS JS - OnClick working on just 1 div
JQuery append HTML using class tags onclick - JQuery append HTML using class tags onclick
点击不同的DIV标签 - Onclick on different DIV tags
HTML是但onclick函数后javascript无法在div中呈现 - html is but javascript is not rendering in div after onclick function
Javascript/Jquery onClick 使用 HTML Div 不起作用 - Javascript/Jquery onClick using HTML Div not working
使用 Javascript 将 onClick 事件嵌入到 HTML div - Using Javascript to embed an onClick event to an HTML div
相关标签