Code666 (代码贴、代码片段)

[JavaScript] JavaScript通过列表框实现url跳转的代码 →→→→→进入此内容的聊天室

来自 , 2021-01-14, 写在 JavaScript, 查看 156 次.
URL http://www.code666.cn/view/abd98725
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <meta http-equiv="Content-Script-Type" content="text/javascript">
  8. <title>Combo Link w/ Description</title>
  9. <style type="text/css">
  10. <!--
  11. label {
  12.    display : block;
  13.    color : #09f;
  14.    border-bottom : 1px dashed #ccc;
  15.    margin-bottom : .500em;
  16.    padding-bottom : .300em;
  17.    font-weight : bold;
  18.    text-transform : uppercase; }
  19.  
  20. select {
  21.    color : #506070;
  22.    margin : 0 auto;
  23.    text-align : center;
  24.    border : 1px solid #ccc;
  25.    letter-spacing : 2px;
  26.    height : 28px;
  27.    width : 300px;
  28.    max-width : 300px; }
  29.  
  30. form div { position : relative; }
  31. form {
  32.    background-color : transparent;
  33.    position : absolute;
  34.    left : 3%;
  35.    top : 3%; }
  36. div#main {
  37.    margin : 0 auto;
  38.    min-height : 600px;
  39.    padding : 0;
  40.    width : auto; }
  41.  
  42. div#title {
  43.    background-color : #fff;
  44.    border : 1px solid #ccc;
  45.    margin-top : 1em;
  46.    padding : 1em;
  47.    line-height : 1.4;
  48.    min-height : 70px;
  49.    letter-spacing : 1px;
  50.    color : #506070; }
  51.  
  52. div#label {
  53.    background-color : #f0fff0;
  54.    margin : 0;
  55.    max-width : 300px;
  56.    min-height : 120px;
  57.    padding : 1em;
  58.    border : 1px solid #ccc;
  59.  }
  60.  
  61. input#btn {
  62.    border : 1px solid #ccc;
  63.    color : #506070;
  64.    margin-top : 1em;
  65.    background-color : #fff;
  66.    height : 28px;
  67.    width : 50px;
  68.      }
  69. -->
  70. </style>
  71. <script type="text/javascript">
  72. <!--
  73. /*
  74.   COMBO Link Jumper -
  75.   Author : essential -
  76.  
  77. ~ Profile : http://www.daniweb.com/forums/member383844.html -
  78.  
  79. ~ Get instant solutions in your programming needs, visit : http://www.daniweb.com/
  80.  
  81.   ~ This notice must reamain intact for use.
  82. */
  83.  
  84. var formID = "formId"; // Specify your form id/name.
  85.  
  86. var divDesc = "title"; // Specify your div id, in where you want to show the text description.
  87.  
  88.  
  89. var changeLoc = function( where ) {
  90.    location.href = where;
  91.    };
  92.  
  93. var navigate = function() {
  94. var desc = [
  95.  
  96. /* Description / blurbs #1 */
  97. "DANIWEB IT Discussion Community",
  98.  
  99. /* Description / blurbs #2 */
  100. "Leading the Web to its full potential...",
  101.  
  102. /* Description / blurbs #3 */
  103. "Full Web building tutorials - ALL Free!" ];
  104.  
  105. var div;
  106. var form;
  107.  
  108.       try {
  109.       div = document.getElementsByTagName("div")
  110.       } catch( er ) {
  111.       document.all.tags("div")
  112.       } try {
  113.       form = document.forms[ formID ];
  114.       } catch( e ) {
  115.       form = (( document.getElementById ) ? document.getElementById( formID ) : (( document.all ) ? document.all[ formID ] : document.layers[ formID ] ));
  116.       }
  117.    var index = form.sel.selectedIndex;
  118.       div[ divDesc ].innerHTML = desc[ index ];
  119. };
  120. // -->
  121. </script>
  122. </head>
  123. <body>
  124. <div id="main">
  125. <form id="formId" name="formId" action="." onsubmit="return false;">
  126. <div id="label">
  127. <label for="sel">Jump Box!</label> <select id="sel" name="sel" onchange="navigate();">
  128. <option value="http://www.daniweb.com/">DANIWEB IT Community</option>
  129. <option value="http://www.w3.org/">World Wide Web Consortium</option>
  130. <option value="http://www.w3schools.com">W3Schools Online Tutorials</option>
  131. </select>
  132. <div>
  133. <div id="title">DANIWEB IT Discussion Community</div><div><input type="button" id="btn" name="btn" onclick="changeLoc( formId.sel.options[ formId.sel.selectedIndex ].value );" value="GO!"></div></div>
  134. </div>
  135. </form>
  136. </div>
  137. </body>
  138. </html>
  139. //javascript/6195

回复 "JavaScript通过列表框实现url跳转的代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666