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

编写此代码的最佳（也是最简单）方法是使用jQuery之类的JS框架。它将极大地帮助规范浏览器差异。

但是，如果这不是一个选项，让我们尝试修复现有的代码。 <a href="#payments">Payment Information</a>会跳转到id="payments"而不是name的元素。修复后，将onClick="show('tab2')"添加到<a>。

在show函数中，此代码if(ie5 || ns6)的重点是什么？这基本上是说，如果它是IE5或Netscape6，那么显示元素（假设变量ie5和ns6在某处正确设置）。尝试删除它，我认为你不需要它。

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

1 个答案: