Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产精品视频在,毛片一级在线观看,色先锋资源站 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢(xún)熱線(xiàn)：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JavaScript 設(shè)置和控制下拉菜單
          
        
           
          
	
	
          
		
                        
          拉菜單的屬性
          length 表示選項(xiàng)<option>的個(gè)數(shù)
          selected 布爾值,表示選項(xiàng)<option>是否被選中
          SelectedIndex 被選中的選項(xiàng)序號(hào),如果沒(méi)有被選中則為-1,對(duì)于多選下拉菜單而言,返回被選中的第一個(gè)選項(xiàng)序號(hào)。從0開(kāi)始計(jì)數(shù)
          text 選項(xiàng)的文本(它是option專(zhuān)有的屬性)
          value 選項(xiàng)的value值
          type 下拉菜單的類(lèi)型。單選返回select-one,多選返回select-multiple
          options 獲取選項(xiàng)的數(shù)組，列如oSelectBox.options[2]表示下拉菜單oSelectBox中的第3項(xiàng)
          訪(fǎng)問(wèn)選中項(xiàng)
          下拉菜單(單選):
          <html>
<head>
<title>下拉菜單，單選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
-->
</style>
<script language="javascript">
function checkSingle(){
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.constellation;
    var iChoice = oSelectBox.selectedIndex; //獲取選中項(xiàng)
    alert("您選中了" + oSelectBox.options[iChoice].text); //下拉菜單，單選
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚(yú)</option>
</select>
</p>
<input type="button" onclick="checkSingle()" value="查看選項(xiàng)" />
</form>
</body>
</html>
          下拉菜單(多選):
          <html>
<head>
<title>下拉菜單，多選</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
margin:0px; padding:2px;
}
-->
</style>
<script language="javascript">
function checkMultiple(){
var oForm = document.forms["myForm1"];
var oSelectBox = oForm.constellation;
var aChoices = new Array();
//遍歷整個(gè)下拉菜單
for(var i=0;i<oSelectBox.options.length;i++)
if(oSelectBox.options[i].selected) //如果被選中
aChoices.push(oSelectBox.options[i].text); //壓入到數(shù)組中,可以用于單選的情況;
alert("您選了：" + aChoices.join()); //輸出結(jié)果
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<label for="constellation">星座：</label>
<p>
<select id="constellation" name="constellation" multiple="multiple" style="height:180px;">
<option value="Aries">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚(yú)</option>
</select>
</p>
<input type="button" onclick="checkMultiple()" value="查看選項(xiàng)" />
</form>
</body>
</html>
          通用的訪(fǎng)問(wèn)下拉菜單選中項(xiàng)的方法:
          <script language="javascript">
function getSelectValue(Box){ //Box參數(shù)select標(biāo)簽的ID值
    var oForm = document.forms["myForm1"];
    var oSelectBox = oForm.elements[Box]; //根據(jù)參數(shù)相應(yīng)的選擇下拉菜單
    if(oSelectBox.type == "select-one"){ //判斷是單選還是多選
    var iChoice = oSelectBox.selectedIndex; //獲取選中項(xiàng)
    alert("單選，您選中了" + oSelectBox.options[iChoice].text);
    }else{
    var aChoices = new Array();
    //遍歷整個(gè)下拉菜單
    for(var i=0;i<oSelectBox.options.length;i++)
    if(oSelectBox.options[i].selected) //如果被選中
    aChoices.push(oSelectBox.options[i].text); //壓入到數(shù)組中
    alert("多選，您選了：" + aChoices.join()); //輸出結(jié)果
    }
}
</script>
          函數(shù)使用方法:
          <select id="constellation1" name="constellation1">
<option value="Aries" selected="selected">白羊</option>
<option value="Taurus">金牛</option>
<option value="Gemini">雙子</option>
<option value="Cancer">巨蟹</option>
<option value="Leo">獅子</option>
<option value="Virgo">處女</option>
<option value="Libra">天秤</option>
<option value="Scorpio">天蝎</option>
<option value="Sagittarius">射手</option>
<option value="Capricorn">摩羯</option>
<option value="Aquarius">水瓶</option>
<option value="Pisces">雙魚(yú)</option>
</select>
<input type="button" onclick="getSelectValue('constellation1')" value="查看選項(xiàng)" />
          添加、替換、刪除選項(xiàng)
          通過(guò)構(gòu)造函數(shù)Option()直接添加value、text等信息，相當(dāng)方便
          var oOption = new Option(text,value,defaultSelected,selected)
          defaultSelected為布爾型值:1(true)設(shè)置下拉式表單默認(rèn)值,
          selected為布爾值:1(true)表示被選中
          最后兩項(xiàng)默認(rèn)值為0,如果不希望添加的選項(xiàng)被默認(rèn)選中則可以忽略,添加選項(xiàng)時(shí)通常將<select>列表的第length項(xiàng)直接設(shè)置為新的選項(xiàng),即在末尾增加。
          添加選項(xiàng)：
          <html>
<head>
<title>添加選項(xiàng)</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box){ //添加選項(xiàng)，參數(shù)為<select>標(biāo)簽的ID值
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption; //在菜單末尾添加選項(xiàng)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類(lèi)：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball');" />
</form>
</body>
</html>
          替換選項(xiàng)
          如果下拉菜單中的序號(hào)為已經(jīng)存在了的選項(xiàng),添加時(shí)則會(huì)自動(dòng)替換原有的選項(xiàng)
          oBox.options[iNum]=oOption;//替換iNum個(gè)選項(xiàng)
          <html>
<head>
<title>替換選項(xiàng)</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function ReplaceOption(Box,iNum){ //替換選項(xiàng),參數(shù)Box為<select>的ID值,iNum為替換的選項(xiàng)序號(hào);
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.options[iNum] = oOption; //替換第iNum個(gè)選項(xiàng)
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類(lèi)：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="籃球替換為乒乓球" onclick="ReplaceOption('ball',1);" />
</form>
</body>
</html>
          添加選項(xiàng)到具體位置
          <html>
<head>
<title>添加到具體位置</title>
<style>
<!--
form{padding:0px; margin:0px; font:14px Arial;}
p{margin:0px; padding:3px;}
input{margin:0px; border:1px solid #000000;}
-->
</style>
<script language="javascript">
function AddOption(Box,iNum){
var oForm = document.forms["myForm1"];
var oBox = oForm.elements[Box];
var oOption = new Option("乒乓球","Pingpang");
oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
</head>
<body>
<form method="post" name="myForm1">
球類(lèi)：
<p>
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">籃球</option>
<option value="Volleyball">排球</option>
</select>
</p>
<input type="button" value="添加乒乓球" onclick="AddOption('ball',1);" />
</form>
</body>
</html>
          以上代碼IE7中雖然在正確的位置插入了選項(xiàng),但內(nèi)容卻沒(méi)有顯示出來(lái)(bug問(wèn)題)
          兼容性更好的代碼,使用方法與以上相同;
          <script language="javascript">
function AddOption(Box,iNum){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    //兼容IE7，先添加選項(xiàng)到最后，再移動(dòng)
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[iNum]);
}
</script>
          注意：IE9已經(jīng)解決了bug問(wèn)題
          刪除下拉菜單的選項(xiàng):
          刪除下拉菜單中的某個(gè)選項(xiàng)時(shí)相對(duì)最簡(jiǎn)單的,只需要將這個(gè)選項(xiàng)設(shè)置為null即可
          bBox.options[iNum]=null;
          部導(dǎo)航條布局
          html代碼：
          <!DOCTYPE html><html><head> 
          <meta charset="utf-8"> 
          <title>頭部導(dǎo)航條制作</title> 
          <link rel="stylesheet" type="text/css" href="css/master8.css">
          </head>
          <body>
          <div class="navbox"> 
           <ul class="clearfix"> 
           <li><a href="#">首頁(yè)</a></li> 
           <li><a href="#">資訊</a></li> 
           <li><a href="#">web前端</a></li> 
           <li><a href="#">前端新聞</a></li> 
           <li><a href="#">聯(lián)系我們</a></li> 
           <li><a href="#">關(guān)于我們</a></li> 
           </ul>
          </div>
          </body>
          </html>
          用無(wú)序列表制作頭部導(dǎo)航條：
          • 無(wú)序列表是上下布局排列的，那我們需要思考的是讓他左右布局的方式排列 
          • 左右排列的方式我們所用的是float:left;浮動(dòng)的方法讓li左右布局
            CSS樣式：
          1. .navbox{
          2.  width:960px;
          3.  height:40px;
          4.  margin:20pxauto;
          5.  background:#08c;
          6. }
          7. .navbox >ul>li{
          8. float: left;
          9.  width:160px;
          10.  height:40px;
          11.  line-height:40px;
          12.  text-align: center;
          13.  font-size:16px;
          14. }
          鼠標(biāo)移入時(shí)實(shí)現(xiàn)顏色的變換
          HTML代碼：
          <div class="navbox"> 
           <ul class="clearfix"> 
           <li><a href="#">首頁(yè)</a></li> 
           <li><a href="#">資訊</a></li> 
           <li><a href="#">web前端</a></li> 
           <li><a href="#">前端新聞</a></li> 
           <li><a href="#">聯(lián)系我們</a></li> 
           <li><a href="#">關(guān)于我們</a></li> 
          </ul></div>
          思路： 
          鼠標(biāo)移入時(shí)每個(gè)<li>顯示為另一種顏色background: #00bfff; 
          css代碼：
          .navbox ul li a{ display: block; color: #fff; background: #08c;}.navbox ul li a:hover{ text-decoration: none; background: #00bfff;}
          下拉菜單實(shí)現(xiàn)
          html：
          <div class="navbox"> 
           <ul class="clearfix"> 
           <li><a href="#">首頁(yè)</a></li> 
           <li><a href="#">資訊</a></li> 
           <li><a href="#">web前端</a> 
           <ul class="subnav"> 
           <li><a href="#">HTML</a></li> 
           <li><a href="#">CSS</a></li> 
           <li><a href="#">JavaScript</a></li> 
           </ul> 
           </li> 
           <li><a href="#">前端新聞</a></li> 
           <li><a href="#">聯(lián)系我們</a></li> 
           <li><a href="#">關(guān)于我們</a></li> 
           </ul>
          </div>
          思路： 
          在一級(jí)菜單web前端下實(shí)現(xiàn)二級(jí)菜單<ul class="subnav">
          1. html
          2. css
          3. JavaScript 
            當(dāng)鼠標(biāo)移入菜單時(shí)web前端時(shí)顯示二級(jí)菜單，移出時(shí)隱藏； 
            CSS代碼實(shí)現(xiàn)：
          .subnav{ display: none;}/*鼠標(biāo)沒(méi)有移入“web前端”選項(xiàng)欄時(shí)二級(jí)菜單隱藏*/.navbox ul li:hover .subnav{ display: block;}/*當(dāng)鼠標(biāo)移入“web前端”選項(xiàng)欄時(shí)顯示二級(jí)菜單*/
          三級(jí)菜單實(shí)現(xiàn)
          HTML
          <div class="navbox"> 
           <ul class="clearfix"> 
           <li><a href="#">首頁(yè)</a></li> 
           <li><a href="#">資訊</a></li> 
           <li><a href="#">web前端</a> 
           <ul class="subnav"> 
           <li><a href="#">HTML</a></li> 
           <li><a href="#">CSS</a> 
           <ul class="threenav"> 
           <li><a href="#">css1</a></li> 
           <li><a href="#">css2</a></li> 
           <li><a href="#">css3</a></li> 
           </ul> 
           </li> 
           <li><a href="#">JavaScript</a></li> 
           </ul> 
           </li> 
           <li><a href="#">前端新聞</a></li> 
           <li><a href="#">聯(lián)系我們</a></li> 
           <li><a href="#">關(guān)于我們</a></li> 
           </ul>
          </div>
          思路： 
          前面與二級(jí)菜單思路相似唯一不同的是三級(jí)菜單顯示的位置。
          我們看看css的絕對(duì)定位與相對(duì)定位這篇文章
          CSS代碼：
          .subnav>li{ position: relative;}.threenav{ position: absolute; top: 0; left: 160px; width: 160px;}.subnav, .threenav{ display: none;}.subnav li:hover .threenav{ display: block;}
          最后實(shí)現(xiàn)的效果如下圖：
          家好，今天給大家介紹一款，css+js實(shí)現(xiàn)的下拉百葉窗式彈出菜單html頁(yè)面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。
          圖1
          下拉動(dòng)畫(huà)非常自然，而且還可以收折恢復(fù)到初始狀態(tài)（圖2）
          圖2
          源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）
          圖3
          本源碼編碼：20218，需要的朋友，訪(fǎng)問(wèn)下面鏈接后，搜索20218，即可獲取。
          就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
91久久精品午夜一区二区|
蜜芽亚洲av无码一区二区三区
|
亚洲高清偷拍一区二区三区|
国产成人精品一区二三区|
91精品国产一区|
精品免费久久久久国产一区|
亚洲大尺度无码无码专线一区|
久久一区不卡中文字幕|
国产成人片视频一区二区|
亚洲熟妇AV一区二区三区宅男|
日韩av无码一区二区三区|
国产午夜精品免费一区二区三区|
精品一区精品二区|
国产在线一区二区三区av
|
国精产品一区二区三区糖心|
国产av夜夜欢一区二区三区|
无码aⅴ精品一区二区三区|
日本免费一区二区在线观看|
日韩国产精品无码一区二区三区|
色婷婷综合久久久久中文一区二区|
三上悠亚精品一区二区久久|
中文字幕一区二区视频|
无码人妻AⅤ一区二区三区水密桃
无码欧精品亚洲日韩一区夜夜嗨
无码毛片一区二区三区中文字幕
无码毛片一区二区三区视频免费播放
|
久久精品免费一区二区|
日韩人妻无码一区二区三区99|
污污内射在线观看一区二区少妇
|
无码国产亚洲日韩国精品视频一区二区三区
|
中文字幕在线一区二区在线|
久久精品无码一区二区无码|
亚洲综合一区二区|
亚洲综合无码一区二区痴汉
|
久久久久久一区国产精品|
精品少妇一区二区三区在线|
国产免费一区二区视频|
国产精品特级毛片一区二区三区|
日韩精品无码一区二区三区|
一区二区和激情视频|
日本一区二区三区免费高清在线|
亚洲一区无码精品色|
国产精品伦一区二区三级视频|
亚洲一区二区三区精品视频|