欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js控制div層的疊加簡單方法

 更新時間：2016年10月15日 12:32:38   投稿：jingxian  
下面小編就為大家?guī)硪黄猨s控制div層的疊加簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

如下所示：

<style type="text/css">
.favorite_icon{float:left; padding: 0 0 0 30px;}
.favorite_label{float:left; width:950px;}
.favorite_label h2{  border-bottom: medium none;height: 60px;padding: 0.8em 0 0 0px;}
.favorite_title{height:60px;margin:0px auto 12px auto;}
.favorite_title a:link, .favorite_title a:visited {color: #333; background-color:#8bb65a;}
.favorite_title a:hover {color: #333;text-decoration: none; background-color:#6c9541;}
.add_favorite {border-radius: 0;color: #fff !important;font-family: "宋體","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 12px;line-height: 17px;padding: 5px 16px;float: right !important;border: medium none;
 height: 18px;background-image: none;cursor: pointer;display: inline-block;font-weight: 400;margin-bottom: 0;
 text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;}
#favorite_count{color:#303030;font-size:12px;padding: 0 0 0 7px;}
.favorite_list{clear:both; padding: 0 10px 200px 10px;}
.list_type li{float:left;line-height: 17px;} 
.list_type a{text-decoration: none;font-size: 15px;}
.list_type a:link {color: #6c9541;}
.list_type a:visited{color: #333;}
.list_type a:hover {color: #6c9541;text-decoration: none;}
.list_line{clear:both;height:10px; margin-bottom:10px;border-bottom:1px groove #ccc;}
.nums{font-weight:bold;}
.t1{border-bottom:1px dotted #ccc;height: 40px;padding: 0.8em 0 0 30px;}
.list_content{clear:both;}
.list_content h3{float:left; width:763px;}
.list_content a{text-decoration:none; display:block;font-family: "宋體","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 15px;color: #333; float:left; }
.list_content a:link, .favorite_title a:visited {color:#333;text-decoration: none;}
.list_content a:hover {color: #bb1c20;text-decoration: none; }
.date{color:#ccc;font-size:13px;padding: 0 0 0 7px;float:left !important;text-align: center; 
     vertical-align: middle;white-space: nowrap;text-decoration: none; }
.edit{ margin: 0 0 0 20px;}
.delete{ margin: 0 0 0 10px;}

.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;
  background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.10;filter:alpha(opacity=80);}
.white_content{display:none;position:absolute;top:15%;left:25%;width:500px;height:250px;padding:16px;
  border:1px solid #ccc;background-color:white;z-index:1002;overflow:auto;}
.white_content a{float:right; color:#aca7a7;text-decoration: none;}
.form-group{clear:both; margin:10px 0 10px 0;}
.control-label{float:left; margin:10px 0 10px 30px;color:#aca7a7;}
#url,#title{width:330px;height:23px;border:solid 1px #ccc; background:#f8f8f8;color:#8d8585;}
.col-xs-9{float:left; margin:10px 0 10px 10px;}
.btn-default,.btn-primary{float:right; width:80px;border-radius: 0;color: #fff !important;
    font-family: "宋體","Helvetica Neue",Helvetica,Arial,sans-serif;font-size: 12px;line-height: 14px;
    padding: 5px 18px;text-align: center;vertical-align: middle;white-space: nowrap;text-decoration: none;}
.btn-default{border:solid 1px #ccc; background:#9a9a9a;color:#fff;margin:15px 20px 0 0;}
.btn-default:hover {background:#8d8585;}
.btn-primary{border:solid 1px #ccc; background:#8bb65a;color:#fff;margin:15px 78px 0 0;}
.btn-primary:hover {background:#6c9541;}
</style>

<div class="favorite_title">
    <div class="favorite_label">
      <img class="favorite_icon" width="48" height="48" src="http://127.0.0.1/phpcms/statics/images/favorite/favorite_icon_48_48.jpg"/>
      <h2>&nbsp;&nbsp;收藏<span id="favorite_count">（n個）</span>
      <a class="add_favorite" href="javascript:void(0)" onclick="add_shoucang();">添加收藏</a>
      </h2>
    </div>
  </div>

  <div class="favorite_list">
    <div class="list_type">
      <ul class="all">
       <li>&nbsp;<a href="#>全部(<span class="nums"></span>)</a></li>
       <li>&nbsp;<a href="#">鋼琴譜(<span class="nums"></span>)</a></li>
       <li>&nbsp;<a href="#">鋼琴曲(<span class="nums"></span>)</a></li>
      </ul>
    </div>

    <div class="list_line">
    </div>

    <div class="list_content">
      <ul class="navigation" id="navigation">
        {loop $info $r}
        <li class="t1"> 
         <a href="#" ><label class="shoucangId" id="shoucangId" style="display:none;">{$r[id]}</label>
                <h3>{$r[title]}</h3></a>
         <span class="date">{date("Y-m-d",$r[inputtime])}</span>
         <a class="edit" href="javascript:void(0)" onclick="edit_shoucang();">
         <img alt="編輯" src="http://127.0.0.1/phpcms/statics/images/favorite/edit.jpg"/></a>
         <a class="delete" href="JavaScript:void(0)" onclick="ConfirmDel();">
         <img alt="刪除" src="http://127.0.0.1/phpcms/statics/images/favorite/delete.jpg"/></a>
         </li>
        {/loop}
        <li class="t1">&nbsp;
        </li>
      </ul>
    </div>
  </div>
  </div>  
  
  <div id="light" class="white_content">
  <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
  <span>關(guān)閉</span></a>
  <br>
  <h2 style="color:#999292;">添加收藏</h2>
  <div class="form-group">
    <label for="url" class="control-label col-xs-2"><span>*</span>網(wǎng)址：</label>
    <div class="col-xs-9">
       <input id="url" type="text" name="url" class="form-control" value=" http://"/>
    </div>
  </div>
  
  <div class="form-group">
    <label for="title" class="control-label col-xs-2"><span>*</span>標(biāo)題：</label>
    <div class="col-xs-9">
      <input id="title" type="text" name="title" class="form-control" />
    </div>
  </div>

  <div class="form-group">
    <label for="title" class="control-label col-xs-2"><span>*</span>類別：</label>
    <div class="col-xs-9">
     <label id="m1" >
      <input type="radio" name="radio" id="radio_pu" value="鋼琴譜" checked="checked"/><span>鋼琴譜</span></label>
     <label id="m2"><input type="radio" name="radio" id="radio_qu" value="鋼琴曲" /><span>鋼琴曲</span></label>
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-xs-5 text-right">
       <input type="submit" value="收藏" name="dosumbit" class="btn btn-primary"/> 
       <button type="button" class="btn btn-default" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</button>
    </div>
  </div>

<script type="text/javascript">
//添加收藏
function add_shoucang()
{
  document.getElementById('light').style.display='block';
  document.getElementById('fade').style.display='block';
  $("#title").val('');
  $("#url").val('http://');
  $("#shoucnag_id").val('');
  $("input[name='radio'][value='鋼琴譜']").attr("checked",true);
}

//刪除
function ConfirmDel() 
{
  var _id;
  if(confirm('確定刪除？')) 
   {
     $('.navigation>li').click(function(){
      var iVal = $(this).index();
      $('.navigation>li').eq(iVal).hide();  
    });
   } 

   else 
   {
   document.getElementById('light').style.display='none';
   document.getElementById('fade').style.display='none'
   }
}
</script>

【效果預(yù)覽】

以上就是小編為大家?guī)淼膉s控制div層的疊加簡單方法全部內(nèi)容了，希望大家多多支持腳本之家~

相關(guān)文章

  • 圖解JavaScript作用域鏈底層原理

    圖解JavaScript作用域鏈底層原理

    當(dāng)代碼在一個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的一個作用域鏈,作用域鏈的用途是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問,下面這篇文章主要給大家介紹了關(guān)于JavaScript作用域鏈底層原理的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • 基于Bootstrap實現(xiàn)tab標(biāo)簽切換效果

    基于Bootstrap實現(xiàn)tab標(biāo)簽切換效果

    這篇文章主要為大家詳細(xì)介紹了基于Bootstrap實現(xiàn)tab標(biāo)簽切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-05
  • 利用layer實現(xiàn)表單完美驗證的方法

    利用layer實現(xiàn)表單完美驗證的方法

    今天小編就為大家分享一篇利用layer實現(xiàn)表單完美驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS實現(xiàn)輸入框提示文字點擊時消失效果

    JS實現(xiàn)輸入框提示文字點擊時消失效果

    這篇文章主要介紹了JS實現(xiàn)輸入框提示文字點擊時消失效果,涉及javascript針對鼠標(biāo)的響應(yīng)及事件監(jiān)聽機制相關(guān)技巧,需要的朋友可以參考下
    2016-07-07
  • js全選按鈕的實現(xiàn)方法

    js全選按鈕的實現(xiàn)方法

    在我們進行項目選擇時，會出現(xiàn)選擇多個項目或者是項目實現(xiàn)全選，這樣的功能如何實現(xiàn)吶，本文給出了js實現(xiàn)checkbox全選的詳細(xì)代碼，希望大家喜歡。
    2015-11-11
  • 帶你用原生js寫一個簡單的注冊登錄頁面

    帶你用原生js寫一個簡單的注冊登錄頁面

    這篇文章主要給大家介紹了關(guān)于如何使用原生js寫一個簡單的注冊登錄頁面的相關(guān)資料,文中介紹了一個以js驗證表單的簡潔的注冊登錄頁面,需要的朋友可以參考下
    2023-06-06
  • 用js控制電燈開關(guān)

    用js控制電燈開關(guān)

    這篇文章主要為大家詳細(xì)介紹了用js控制電燈開關(guān)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • Javascript驗證上傳圖片大小[前臺處理]

    Javascript驗證上傳圖片大小[前臺處理]

    在做上傳圖片的時候，如果不限制上傳圖片大小，后果非常的嚴(yán)重。解決這個問題有兩種方式：后臺處理、前臺處理
    2014-07-07
  • JavaScript數(shù)組分組groupBy示例詳解

    JavaScript數(shù)組分組groupBy示例詳解

    JavaScript?最近發(fā)布了一個方法?Object.groupBy,可以對可迭代對象中的元素進行分組,這篇文章主要介紹了JavaScript數(shù)組分組groupBy示例,需要的朋友可以參考下
    2023-12-12
  • 小程序封裝路由文件和路由方法(5種全解析)

    小程序封裝路由文件和路由方法(5種全解析)

    這篇文章主要介紹了小程序5種路由方法使用場景，封裝路由文件和路由方法，提升小程序體驗和開發(fā)效率，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05

最新評論