教程：給初學的幾個小例子（待補充）

?

tag標簽切換效果：

有好幾個tag標簽.沒被選中時是灰色，被選中時是紅色，并且自己被選中后，它的兄弟們又要變灰。

點擊標簽后，下面的內容區域，要顯示和標簽對應的內容。

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){$(".tag1").click(function(){$(this).addClass('active').siblings().removeClass('active'); //標簽切換效果。給當前激活標簽加 .active。給它的兄弟們移除 .active。var idx = $(this).index(); //取索引值 $('.tag-body .tag-item').eq(idx).addClass('active').siblings().removeClass('active');//控制下面的內容的顯隱。 }); }); </script> <style type="text/css"> ul,li{margin:0;padding:0;list-style:none;} .tag-head .tag1{float:left;margin-right:4px;padding:5px 20px;background:#999;color:#fff;cursor:pointer;} .tag-head .tag1.active{background:#f00;}.tag-body{clear:both;border-top:1px solid #000;width:500px;} .tag-body .tag-item{display:none;height:400px;background:#f8f8f8;padding:10px;} .tag-body .tag-item.active{display:block;} </style> <ul class="tag-head"><li class="tag1 active">標簽1</li><li class="tag1">標簽2</li><li class="tag1">標簽3</li> </ul> <ul class="tag-body"><li class="tag-item active">面板1</li><li class="tag-item">面板2</li><li class="tag-item">面板3</li> </ul>

?

彈層關閉按鈕：

點擊彈層中的.close按鈕，關閉彈層

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){$(".close").click(function(){$(this).parent().hide(); //找到彈層按鈕的父元素，關閉。 }); }); </script> <style type="text/css"> .box{position:relative;border:1px solid #999;width:500px;height:400px;z-index:100;} .box .close{position:absolute;top:0;right:0;font-size:30px;line-height:1;font-family:'Arial';padding:10px 20px;background:#000;color:#fff;cursor:pointer;} </style> <div class="box"><div class="close">X</div><p>彈窗關閉效果</p> </div>

?

?

..

?

posted on 2016-06-06 10:52 bjhhh 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/qq21270/p/5563031.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的教程：给初学的几个小例子（待补充）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。