Question

这里是否有人知道如何创建面板标签？我们班上没有讨论过这个问题我的老板要求我将A到Z的列表链接更改为面板标签。我的链接列表工作正常。我尝试在我的链接中创建字母（稍后会看到）一个图像，但我的老板不希望这样，他特别说，例如，你点击链接字母“A”，链接应该看起来像它与表格合并，或者当点击链接时的数据与不同页面中的数据相似。

这是我用于链接字母的代码： *注意到A和B链接不同，这是我第一次尝试他不喜欢。

    <table class="sub" border="0" cellpadding="0" cellspacing="0">              
            <!--A - Z link page-->
                <tr>
                <td colspan ="6" align="CENTER">
                <a href="index.php?namelist=a"onmouseover="AmouseOver()" onmouseout="AmouseOut()" /><img src="images/A.png" id="A" /></a>
                &nbsp;
                <a href="index.php?namelist=b"onmouseover="BmouseOver()" onmouseout="BmouseOut()" /><img src="images/B.png" id="B" /></a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=c">C</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=d">D</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=e">E</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=f">F</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=g">G</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=h">H</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=i">I</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=j">J</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=k">K</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=l">L</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=m">M</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=n">N</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=o">O</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=p">P</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=q">Q</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=r">R</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=s">S</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=t">T</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=u">U</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=v">V</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=w">W</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=x">X</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=y">Y</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="index.php?namelist=z">Z</a>

                </td>
                </tr>

当用户点击链接时，将调用这组代码。实际上我的代码工作得很好。我的老板只想改变设计，以便在我的在职培训中能做些什么。看到我只是一个学生，但我总是在这里遇到困难。我希望有人可以帮助我

的 MisaChan 的

PS。我已经尝试搜索网站如何制作面板选项卡，而不会改变我的代码，但没有找到运气。几乎所有都是代码生成器，我不喜欢这些网站的结果，我认为css将帮助我在这里也像我见过的大多数论坛所说

Answer 1

基本上，制作选项卡式面板的技巧是更改所选项目的样式与其他选项卡不同。你肯定需要使用CSS。我会将所有字母更改为跨度，并为其提供类似“tabunsel”的类名称，并为选定的选项卡添加类名称“tabsel”。

在跨度的CSS中，您可以执行一些技巧，例如添加背景图像，该背景图像看起来像选定和未选定颜色的不同颜色的选项卡。如果您能够应对挑战，也可以使用纯CSS执行此操作。

我首先要研究网上几个好看的标签页的代码和CSS，或者寻找一个教程。我发现this只是谷歌搜索。

Answer 2

嗯，不是那样的。我就是这样做的：

<div id="tabs"><a href="index.php?namelist=a">A</a> <a href="index.php?namelist=b">B</a> <a href="index.php?namelist=c">C</a> <a href="index.php?namelist=d">D</a> <a href="index.php?namelist=e">E</a> <a href="index.php?namelist=f">F</a> <a href="index.php?namelist=g">G</a> <a href="index.php?namelist=h">H</a> <a href="index.php?namelist=i">I</a> <a href="index.php?namelist=j">J</a> <a href="index.php?namelist=k">K</a> <a href="index.php?namelist=l">L</a> <a href="index.php?namelist=m">M</a> <a href="index.php?namelist=n">N</a> <a href="index.php?namelist=o">O</a> <a href="index.php?namelist=p">P</a> <a href="index.php?namelist=q">Q</a> <a href="index.php?namelist=r">R</a> <a href="index.php?namelist=s">S</a> <a href="index.php?namelist=t">T</a> <a href="index.php?namelist=u">U</a> <a href="index.php?namelist=v">V</a> <a href="index.php?namelist=w">W</a> <a href="index.php?namelist=x">X</a> <a href="index.php?namelist=y">Y</a> <a href="index.php?namelist=z">Z</a></div>

然后，查看CSS here以了解如何实现标签。

如何创建面板选项卡？

2 个答案: