php - 如何通过选择文档中较早的链接来查看隐藏的 <span> ？

Question

我什至不知道我这样做是否正确，但我想我会要求获得更好的意见。基本上我所做的是:创建一个信息/导航栏，它根据用户点击的选项卡展开。我要添加的是基于同一页面上较早的链接展开某个选项卡并转发给它的功能(就像此链接将执行的操作:<a href="#contactus">)。我好像做不到。应打开的选项卡包含在 <ul><li> 中。列出并隐藏。我将包含代码:

<div id="tab1"> 
<ul class="tablinks"> 
<li><span>Check-Out</span></li> 
<li><a onClick="show('tab2')">Payment</a></li>  
</ul> 
<table>
<tr>
    <td><img alt=Check-Out src="http://link.com/images/checkouticon.gif"     width=48px height=45></td>
    <td>
        <p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
    </td>
</tr>
</table>  
<div class="tabbase"></div> 
</div> 
<!-- tab 2 --> 
                        <div id="tab2"> 
<ul class="tablinks"> 
<li><a onClick="show('tab1')">Check-Out</a></li> 
<li><span>Payment</span></li>
</ul> 
<table>
<tr>
    <td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
    <td>
        <p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
    </td>
</tr>
</table> 
<div class="tabbase"></div> 
</div> 

这是影响它的 CSS:

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}

#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}

ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}

ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}

ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}

ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}

ul.tablinks li a:active{
text-decoration:underline;
}

div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}

div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}

最后但并非最不重要的是，这是影响选项卡隐藏方面的 .php 外部文件中的代码:

function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
    //document.getElementById(id).style.display = "inline";
    document.getElementById(id).style.display = "block";
}
}

function hide(){
if(ie5 || ns6){
    document.getElementById('tab1').style.display = "none";
    document.getElementById('tab2').style.display = "none";
    document.getElementById('tab3').style.display = "none";
    document.getElementById('tab4').style.display = "none";
    document.getElementById('tab5').style.display = "none";
    document.getElementById('tab6').style.display = "none";
    document.getElementById('tab7').style.display = "none";
}
}

因此，我们的想法是能够在文档的前面插入一个链接以打开“付款”选项卡。我试过这样的事情:<a href="#payments">Payment Information</a>并将列表的标签更改为:<li><span name="payments">Payments</span></li> .除非我已经单击“付款”选项卡并打开它，然后单击链接，否则这不起作用。然后我的屏幕会向下滚动并聚焦在那个区域。有没有办法让屏幕向下滚动并查看 <span>无需先“打开”它？

提前感谢您的所有帮助。我应该指出，虽然我确实有一些 HTML、Javascript 和 PHP 方面的能力，但我仍在学习并且不知道所有最好的做事方式。

Answer 1

编写此代码的最佳(也是最简单)方法是使用 JS 框架，例如 jQuery。它将极大地帮助标准化浏览器差异。

但如果那不是一个选项，让我们尝试修复现有代码。 <a href="#payments">Payment Information</a>将跳转到带有 id="payments" 的元素, 不是 name .一旦你解决了这个问题，添加一个 onClick="show('tab2')"那个<a> .

在show函数中，这段代码的意义是什么if(ie5 || ns6) ？这基本上是说，如果它是 IE5 或 Netscape6，则显示该元素(当然假设变量 ie5 和 ns6 已在某处正确设置)。尝试删除它，我认为您不需要它。