图像和文本查询-解网

问：

我这里有一个非常简单的html页面：

http://www.nomorepasting.com/getpaste.php?pasteid=22407

我的页面上有 4 层。这样做的原因是它是一个更复杂的网站的框架，我已经简化了它来问我的问题。基本上，我希望能够单击第 2 层中的不同链接并更改第 1 层中的图像，但是我发现这样做的方法：

<script type="text/javascript"><!--

function sbox(boxName,xname) {

    theBox = document.getElementById(boxName);

theBox.className = xname;



}

//-->

</script>

导致文本 nto 消失，这是我需要的，以及一种单击并用文本替换任何图像的方法。我找到了替代的 javascript 代码，但无法将其应用于我的 html 页面。

<script type="text/javascript">
function toggleImg(myid) {
  objtxt = document.getElementById(myid);
  objimg = document.getElementById(myid+'_img');

  if( objtxt.style.display == 'block' ) { // Show image, hide text
    objtxt.style.display = 'none';
    objimg.style.display = 'block';
  } else { // Hide image, show text
    objimg.style.display = 'none';
    objtxt.style.display = 'block';
  }

}
</script>

在不更改页面设计的情况下执行此操作的最简单方法是什么？注意：我不想使用框架，我想了解这是如何完成的，并为自己做。

我的另一个问题是关于图层是否应该取代表格：当可以使用 css 代替时，使用表格总是不好吗？使用图层制作行和列等效项只是为了格式化文本数据，而不是网站结构，是否容易？

JavaScript HTML CSS

好吧，首先，在设置背景图像时，无论您将 Z 索引设置得有多高，它都不会隐藏 DIV 中的文本。它只是不起作用。一种解决方案是将内部文本包装在一个 span 中，并在希望显示 div 的背景图像时隐藏 span。但是，从你的问题来看，你不想改变你的html结构，但是，我相信你必须这样做才能得到你想要的东西。

示例代码：

<html>
    <head>
        <style type="text/css">
            .class1{color:#000;}
            .class2{color:#00f;}
            .class3{color:#0f0;}
            .class4{color:#f00; background-image:url('someimage.jpg');}
        </style>
    </head>
    <body>
        <script type="text/javascript">
            function sbox(divid, classname)
            {
                document.getElementById(divid).className=classname;
                if(document.getElementById(divid+"_text")!=null)
                    document.getElementById(divid+"_text").style.display="none";
            }
        </script>
        <div>
            <a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
            <a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
            <a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
        </div>
        <div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

我同意 TravisO 的观点，HTML 表格应该用于表格数据，而不是作为布局机制。当你有一个庞大的表/行/等层次结构时，表格也有一些CSS的奇怪之处。

不幸的是，将类更改回 class1 将不会再次显示文本。我给出的代码将始终隐藏文本，如果它在跨度中找到它。您可以执行如下操作，并添加另一个 CSS 语句，如果使用 class4，该语句将隐藏跨度。然后你就不必在 javascript 中使用该代码了。可能是一个更清洁的解决方案：

<html>
    <head>
        <style type="text/css">
                .class1{color:#000;}
                .class2{color:#00f;}
                .class3{color:#0f0;}
                .class4{color:#f00; background-image:url('someimage.jpg');}
        .class4 span { display: none;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
                function sbox(divid, classname)
                {
                        document.getElementById(divid).className=classname;
                 }
        </script>
        <div>
        <a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/>
                <a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/>
                <a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/>
                <a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a>
        </div>
        <div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

就将图像作为背景而言，这可能是您最好的选择。唯一的问题是设置背景图像不会隐藏前景文本。你总是必须以某种方式隐藏该文本

图像和文本查询

An image and text query

评论

评论

评论

评论