點擊切換顯示內容

具體思路爲：將按鈕的索引與內容的索引聯繫起來，經過JS控制CLSS的方法達到切換效果，若是想要靈活的切換按鈕的樣式和顏色，就多設置一組class和CSS，來靈活地操做。

HTML：

<div class="prj-content">
<div class="guowai" id="guowai">
<div>
<img src="./image/kingsmanknight.jpg">
<a href="#">成爲王牌特工</a>
<p>你有什麼須要成爲王牌特工？在這個互動世界中完成任務，以賺取你的方式。</p>
</div>
<div>
<img src="./image/wildflower.jpg">
<a href="#">野花</a>
<p>你想經過發送一個獨特的野花在情人節表達。</p>
</div>
<div>
<img src="./image/nikelidyana.jpg">
<a href="#">耐克GEC kendini</a>
<p>一個互動的、好玩的視頻體驗促進女子2015夏季風格。遊客能夠購物，分享和得到靈感及這個反應的網站。</p>
</div>
</div>

<div class="guowai" id="guonei">
<div>
<img src="./image\txhdyl.jpg">
<a href="#">讓想象綻開</a>
<p>騰訊互動娛樂2015年度發佈會。</p>
</div>
<div>
<img src="./image\dcyx.jpg">
<a href="#">you are fired 單詞遊戲</a>
<p>酷語時代教育科技有限公司產品-全球說app裏的記單詞遊戲，多種學習語言，多種學習玩法。</p>
</div>
<div>
<img src="./image\zdbmm.jpg">
<a href="#">戰鬥吧夢夢</a>
<p>由杭州電魂網絡科技股份有限公司旗下電魂夢平臺推出的一款HTML5小遊戲。</p>
</div>
</div>

<div class="guowai" id="kaiyuan">
<div>
<img src="./image\index.jpg">
<a href="#">～一塊兒來氣味王國玩吧～</a>
<p>很好玩的</p>
</div>
<div>
<img src="./image\zxycc_curve.gif">
<a href="#">炫酷圖表</a>
<p>很炫酷的圖表</p>
</div>
<div>
<img src="./image/nikelidyana.jpg">
<a href="#">耐克GEC kendini</a>
<p>一個互動的、好玩的視頻體驗促進女子2015夏季風格。遊客能夠購物，分享和得到靈感及這個反應的網站。</p>
</div>
</div>
</div>

css：

.prj-menu {
width: 1140px;
height: 42px;
text-align: center;
font-size: 15px;
border-bottom: 1px solid #C8D2DF;
}
.mu1 {
margin: 0 16px;
font-weight: normal;
line-height: 42px;
color: #8492A6;
}
.mu1:hover {
color: black;
}
.mu {
color: red;
margin: 0 16px;
font-weight: normal;
line-height: 42px;
}
.prj-content {
width: 1140.5px;
height: 339.5px;
overflow: hidden;
}
.guowai {
display: block;
width: 1140.5px;
height: 329.5px;
position: relative;
margin: 15px auto 0 auto;
}
.guowai div {
width: 357.5px;
height: 307px;
position: relative;
float: left;
margin:10px 0 11.25px 10px;
border: 1px solid #D3DCE6;
border-radius: 4px;
overflow: hidden;
box-shadow: 1px 3px 4px 0 rgba(0,0,0,.12);
}
.guowai div+div {
margin-left: 20px;
}
.guowai div img {
width: 357.5px;
height: 209px;
border: none;
}
.guowai prj-txt {
position: absolute;
}
.guowai a {
position: relative;
text-decoration: none;
color: #819BE6;
font-size: 20px;
line-height: 50px;
margin: 0px 20px 0 20px;

}
.guowai p {
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0px 20px 20px 20px;
color: #999;
}

JS:

$(document).ready(function() {
　　//獲取點擊事件的對象
　　$(".prj-menu span").click(function(){
　　　　//獲取要顯示或隱藏的對象
　　　　var divShow = $(".prj-content").children('.guowai');
　　　　//判斷當前對象是否被選中，若是沒選中的話進入if循環
　　　　if (!$(this).hasClass('mu')) {
　　　　//獲取當前對象的索引
　　　　var index = $(this).index();
　　　　//當前對象添加選中樣式而且其同胞移除選中樣式；
　　　　$(this).attr('class', 'mu').siblings('span').attr('class', 'mu1');
　　　　//索引對應的div塊顯示
　　　　$(divShow[index]).show();
　　　　//索引對應的div塊的同胞隱藏
　　　　$(divShow[index]).siblings('.guowai').hide();

　　　　} 　　});});