Question

我有一个#val容器div，可以扩展到容纳名为#cat-container的div中的Javascript内容。

cat-container上面有4个标签，编号为1 - 4，所以如果单击1，它将从php数组中加载内容，类似于标签2 -3。

当您单击每个选项卡时，＃val-container成功拉伸到正确的高度，但是我已设置选项卡1及其内容以在页面加载时默认显示。问题是所有其他选项卡中的内容都会加载到第1页的onpage加载中。

<script type="text/javascript">
var i=1;
var tab;
document.getElementById('cat-container').style.position='relative';
document.getElementById('val-container').style.height='auto';
while(tab=document.getElementById('option'+i+'-body'))
{
    tab.style.position='absolute';
    tab.style.top='0';
    tab.style.left='0';
    i++;
}
var urllocation = location.href; //find url parameter
if(urllocation.indexOf("#") == -1)
{
    displayTab(1);
}
else
{
    if(urllocation.indexOf("#option1")>-1)displayTab(1);
    else if(urllocation.indexOf("#option2")>-1)displayTab(2);
    else if(urllocation.indexOf("#option3")>-1)displayTab(3);
    else if(urllocation.indexOf("#option4")>-1)displayTab(4);
    else displayTab(1);
}
</script>

基本上我希望标签1只显示页面加载时的内容。

这一行是问题所在：

的document.getElementById（＆＃39; VAL-容器＆＃39）。style.height =＆＃39;自动＆＃39 ;;

所以如果dispalyTab（1），只显示其内容！

实际显示标签的代码：

 <script type="text/javascript">
function displayTab(num)
{
    var tab,x;
    x=1;
    while(tab=document.getElementById('option'+x+'-body'))
    {
        if(num!=x)tab.style.display='none';
        else tab.style.display='inherit';
        x++;
    }
}
 </script>

 <div class="category-tab" id="aoption1"><a href="#option1" onclick="displayTab(1);return false;">Tab1</a></div>
<div class="category-tab" id="aoption2"><a href="#option2" onclick="displayTab(2);return false;">Tab2</a></div>
<div class="category-tab" id="aoption3"><a href="#option3" onclick="displayTab(3);return false;">Tab3</a></div>
<div class="category-tab" id="aoption4"><a href="#option4" onclick="displayTab(4);return false;">Tab4</a></div>
<br><br>

这是PHP / HTML：

我使用标签1 - 4来简化操作，但事实上它们代表了价格范围：

  echo "<div id=\"cat-container\">";
echo '<div id=\"val-contain\">';

 $cats=array(0,1000,5000,10000,100000);
for($ci=1;$ci<count($cats);$ci++)
{
    if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a   name=\"option".$ci."\"><h3>Gifts for over &pound;100!</h3></a>";
    else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>";
    $i=0;
    for ($p = 0; $p < count($game); $p++ )
    {
        $game[$p]->getProduct();
        if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1])
        {
            if (($i % 3) == 0 )
            {
                if($i)echo "</tr></table>";
                echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>";
            }

            echo "<td>";
            $game[$p]->getLink();
            echo $game[$p]->link;
            echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>";
            echo "<div class=\"container\" style=\"text-align:center;\"><div      class=\"image-spacer\">";
            echo $game[$p]->getImage();
            echo $game[$p]->image;
            echo "</div>";
            echo "<div class=\"specialprice\" >";

            if(!is_numeric($game[$p]->price)){
                echo $game[$p]->price;
            }
            else
            {
                if($game[$p]->price < $game[$p]->maxprice)
                {echo "From only: &pound;".fixedtofloat($game[$p]->price);}
                else
                {echo "Only: &pound;".fixedtofloat($game[$p]->price);}
            }
            echo "</div></div></a>";
            echo "</td>";
            $i++;
        }
    }
    echo "</tr></table></div>";
}
echo "</div>";
echo '</div>';
  ?>

CSS：

#val-contain { }
#cat-container {  }
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design-  gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;}
.category-tab a { color:white; }
.category-tab a:hover { color:#white; }
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;}
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans-    serif;}
.container { background-color:white; }
.imgpad { margin-bottom: 10px; }
.vallinks {color: #c50f07; font-weight: bold; }

希望有人可以提供帮助吗？

Volterony

Answer 1

这是一个纯html /内联css解决方案，带有一个静态选项卡。

<body>
    <style>
        html{
            height: 100%;
        }
        body {
            min-height: 100%;
        }
    </style>

    <div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block">

        <div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1);
            return      false;">Tab1</a></div>
        <div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2);
            return false;">Tab2</a></div>
        <div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3);
            return false;">Tab3</a></div>
        <div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4);
            return false;">Tab4</a></div>    
    </div>


    <div style="max-height: 95%;min-height: 95%; background-color: red;display: block">
        Tab 1 content
    </div>

</body>

Answer 2

你使用'val-contains'作为div的id

echo '<div id=\"val-contain\">';

但您正尝试使用

进行更改

document.getElementById('val-container').style.height='auto';

将div的id更改为val-container。

Div高度自动发行

2 个答案: