0

我是 js、css 和 html 的新手。我正在尝试制作一个网站,但遇到了一些问题。我想让出现在页面底部的表格只出现在第二个选项卡的底部。现在的问题是表格出现在每个选项卡的底部。如果有人可以帮助我,那就太好了。代码如下:

<html>
    <head>
    <title>Apricot Consulting Group</title>
    <link type="text/css" rel="stylesheet" href="apricot.css"/>
    <script type="text/javascript">
    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }
      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }


</script>
  </head>

<body onload="init()">

            <p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>

<ul id="tabs">
    <li><a href="#aboutus">About Us</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#resources">Resources</a></li>
    <li><a href="#computers">Computers</a></li>
</ul>

<div class="tabContent" id="aboutus">

<h1>About Us</h1>
    <div>
    <p>Apricot  Recruitment is a privately owned recruitment consultancy that
has been providing effective business solutions to organisations
throughout the UK.  At Apricot Recruitment we help find rewarding
temporary and permanent jobs for the job seeker, as well as provide
companies with highly skilled and motivated staff.  Our specially
trained consultants will find high quality candidates that match your
specific requirements. Clients and Candidates alike appreciate the
personal service we offer. Independent status means we always work in
the best interest of our customers and are therefore able to offer
complete flexibility of service. Each assignment is treated
individually in order to match both the client and candidates
requirements.</p>



</div>



</div>



<div class="tabContent" id="services">


<h1>Services</h1>

<div>

<p>Successful companies are built by successful people. Your company
needs the most talented, ambitious and determined individuals in order
to thrive. However, tracking down the ideal candidate can be
challenging.  We at Apricot Recruitment help you find that ideal
candidate.</p>

<p>By using our services you are able to outsource all your recruitment
needs to a single recruitment partner who oversees the entire supply
chain.  With an in depth knowledge of London Business, Apricot
Recruitment is ideally placed to help you locate and attract the best
possible candidates for your business. We specialise in going the
extra mile to find exactly the candidate to suit your business. Using
industry contacts and numerous research methods, we know precisely
where to look for your desired person.</p>

<p>The first step in recruiting the right candidates for your company is
learning about your business requirements, we thoroughly question,
evaluate and pre-interview all candidates before recommending only the
most appropriate for interview. This ensures you receive the very best
person for your role.</p>

<p>The Apricot Recruitment team uses a range of tools to source the best
possible talent.  These tools include:</p>



<ul>
<li>Extensive online and internal database searching.</li>
<li>Advertising in Premium Mediums.</li>
<li>Skills Assessment.</li>
<li>Headhunting.</li>
<li>Reference Checking.</li>
</ul>


</div>
</div>


<div class="tabContent" id="resources">

<h1>Resources</h1>

<div>

<p>We use lots of resources like monster, totaljobs, gumtree, etc.</p>


</div>
</div>



<div class="tabContent" id="computers">

<h1>Computers</h1>

    <p>Lots of computers.</p>
    <div>

<div id="DivPhotoGalleryFX"></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
 var flashvars = {};
 var params = {};
 params.base = "";
 params.scale = "noscale";
 params.salign = "tl";
 params.wmode = "transparent";
 params.allowFullScreen = "true";
 params.allowScriptAccess = "always";
 swfobject.embedSWF("PhotoGalleryFX.swf", "DivPhotoGalleryFX", "935", "300", "9.0.0", false, flashvars, params);


</script>


</div>


</div>




</body>

<div id="table">

<center>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</center>

</div>

<script>

tabLinks[services].onclick = display: block;

</script>

</html>

CSS

body {
    background-color: black;
}


h1 {
    font-family: times new roman;
    color: black;
    font-weight: bold;
}

p {

    font-family: times new roman;
    color: black;
}

ul {
    font-family: times new roman;
    color: black;
}


img.center {

display: block;
margin-left: auto;  
margin-right: auto; 

}

 body { font-size: 90%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.5em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: black; background-color: goldenrod; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      div.tabContent { border: 30px solid #c9c3ba; padding: 0.5em; background-color: goldenrod; }
      div.tabContent.hide { display: none; }
    div.table {display:none;}
4

1 回答 1

0

尝试这个。您的代码中似乎还有其他错误,但只需要在您的标记中移动表格:

<html>
<head>
<title>Apricot Consulting Group</title>
<link type="text/css" rel="stylesheet" href="apricot.css"/>
<script type="text/javascript">
    var tabLinks = new Array();
    var contentDivs = new Array();

    function init() {

      // Grab the tab links and content divs from the page
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }
      // Assign onclick events to the tab links, and
      // highlight the first tab
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Hide all content divs except the first
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

    function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Highlight the selected tab, and dim all others.
      // Also show the selected content div, and hide all others.
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Stop the browser following the link
      return false;
    }

    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

    function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }


</script>

    <body onload="init()">

                <p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>

    <ul id="tabs">
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#resources">Resources</a></li>
        <li><a href="#computers">Computers</a></li>
    </ul>

    <div class="tabContent" id="aboutus">

    <h1>About Us</h1>
        <div>
        <p>Apricot  Recruitment is a privately owned recruitment consultancy that
    has been providing effective business solutions to organisations
    throughout the UK.  At Apricot Recruitment we help find rewarding
    temporary and permanent jobs for the job seeker, as well as provide
    companies with highly skilled and motivated staff.  Our specially
    trained consultants will find high quality candidates that match your
    specific requirements. Clients and Candidates alike appreciate the
    personal service we offer. Independent status means we always work in
    the best interest of our customers and are therefore able to offer
    complete flexibility of service. Each assignment is treated
    individually in order to match both the client and candidates
    requirements.</p>



    </div>



    </div>



    <div class="tabContent" id="services">


    <h1>Services</h1>

    <div>

    <p>Successful companies are built by successful people. Your company
    needs the most talented, ambitious and determined individuals in order
    to thrive. However, tracking down the ideal candidate can be
    challenging.  We at Apricot Recruitment help you find that ideal
    candidate.</p>

    <p>By using our services you are able to outsource all your recruitment
    needs to a single recruitment partner who oversees the entire supply
    chain.  With an in depth knowledge of London Business, Apricot
    Recruitment is ideally placed to help you locate and attract the best
    possible candidates for your business. We specialise in going the
    extra mile to find exactly the candidate to suit your business. Using
    industry contacts and numerous research methods, we know precisely
    where to look for your desired person.</p>

    <p>The first step in recruiting the right candidates for your company is
    learning about your business requirements, we thoroughly question,
    evaluate and pre-interview all candidates before recommending only the
    most appropriate for interview. This ensures you receive the very best
    person for your role.</p>

    <p>The Apricot Recruitment team uses a range of tools to source the best
    possible talent.  These tools include:</p>



    <ul>
    <li>Extensive online and internal database searching.</li>
    <li>Advertising in Premium Mediums.</li>
    <li>Skills Assessment.</li>
    <li>Headhunting.</li>
    <li>Reference Checking.</li>
    </ul>
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    </center>

    </div>
    </div>


    <div class="tabContent" id="resources">

    <h1>Resources</h1>

    <div>

    <p>We use lots of resources like monster, totaljobs, gumtree, etc.</p>


    </div>
    </div>



    <div class="tabContent" id="computers">

    <h1>Computers</h1>

        <p>Lots of computers.</p>
        <div>

    <div id="DivPhotoGalleryFX"></div>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
     var flashvars = {};
     var params = {};
     params.base = "";
     params.scale = "noscale";
     params.salign = "tl";
     params.wmode = "transparent";
     params.allowFullScreen = "true";
     params.allowScriptAccess = "always";
     swfobject.embedSWF("PhotoGalleryFX.swf", "DivPhotoGalleryFX", "935", "300", "9.0.0", false, flashvars, params);


    </script>


    </div>


    </div>




    </body>

    <div id="table">

    <center>

    </div>

    <script>

    tabLinks[services].onclick = display: block;

    </script>

于 2013-03-25T16:20:12.717 回答