javascript - 在放置在网页列中的 2 个选项卡之间切换，而无需更改其余页面元素

Question

我被要求在网页的单个列中创建两个切换选项卡/按钮，访问者可以在不更改页面元素的其余部分的情况下在它们之间切换。这些选项卡看起来像 www.vodafone.co.uk 上的“个人”和“企业”选项卡，但在它们之间切换不应将您带到不同的网页。

我最初认为这只能使用 JavaScript 来完成，但后来 www.vodafone.co.uk 的首页只使用 HTML 和 CSS 来完成它，尽管单击任一选项卡都会将您带到另一个网页，我的客户不想要。有没有办法显示两个选项卡，您可以单击它们以显示不同的列表而不影响页面的其余部分？

任何有用的提示将不胜感激。

先感谢您，

伊德

Answer 1

我将展示总体思路：

html:

<input type="button" id="btnSwitch" value="Switch tabs" />
<div class="tab tab1 visible">I'm tab 1</div>
<div class="tab tab2">And i'm tab 2</div>

CSS：

.tab{display:none;height:200px;width:200px;border:solid 1px red;}
.tab.tab2{border:solid 1px blue;}
.tab.visible{display:block;}

javascript（使用 jQuery 总是更好）：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#btnSwitch').click(function(){ $('.tab').toggleClass('visible') });
});
</script>

在这里摆弄：http: //jsfiddle.net/MFfwV/

希望有帮助。