html - 如何创建面板选项卡？

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

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

Answer 1

基本上，制作选项卡式面板的诀窍是将所选元素的样式更改为不同于其他选项卡。您肯定需要为此使用 CSS。我会将所有字母更改为跨度，并为它们提供一个类名，如“tabunsel”，并为选定的选项卡提供一个类名，如“tabsel”。

然后，在 span 的 CSS 中，您可以使用一些技巧，例如添加看起来像选项卡的背景图像，并为选定和未选定的选项卡提供不同的颜色。如果您愿意接受挑战，您也可以使用纯 CSS 来做到这一点。

我会先研究网络上一些好看的标签页的代码和 CSS，或者寻找教程。我找到了 this只是谷歌搜索。