Question

我试图获得这些：

<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>

加载到此：

<div id="maindiv" class="divclass"></div>

这是我的剧本：

  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>';}

我不是最聪明的，但我正在努力。

它会正确加载到div中，但它不会显示它加载的整个页面，它会在y轴和x轴上显示带有滚动条的150x150px内容框。我希望它用这些属性填充一个框。

.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;
}

欢迎任何建议：）

该网站为http://www.pokerinforsterandtaree.com，如果您转到“联系”部分，您可以看到它正在做的事情。

Answer 1

编辑1：尝试此代码，OP。将其复制并粘贴到您的页面中。

<!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">&nbsp;&nbsp;&nbsp;&nbsp;
                <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&nbsp;&nbsp;&nbsp;&nbsp;</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>

尝试使用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>

Please refere to this page on Stack Overflow

Answer 2

您的CSS无法正常工作，因为您没有连接正确的对象。尝试在CSS文件中使用div#maindiv而不是div.maindiv进行编辑。

Answer 3

如果你想通过id获取，请使用#maindiv而不是.maindiv。

＃是id选择器，。是类选择器

或者你可以为你的div分配一个类，

<div id="maindiv" class="divclass"

然后你就可以通过课程表示法来达到。为：

.divclass {
  color:..

onclick函数使用html，div标签和css

3 个答案: