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/

希望对您有所帮助。