如何使用javascript基于变量隐藏/显示div

时间:2014-05-07 14:48:58

标签: javascript html css

我正在尝试根据URL参数显示div。我只能使用html css和javascript。如果变量(来自URL的参数)匹配,我必须将div设置为显示none的部分。

HTML

   <div id="cfiblinks">
     <div class="row">
       <div class="twelve columns">
         <ul class="nav-bar">
           <li>
             <a href="#" target="_blank">
               <span>Order Document Upload</span>
             </a>
           </li>
           <li>
             <a href="#" target="_blank">
               <span>Business Card History</span>
             </a>
           </li>
           <li>
             <a href="#" target="_blank">   
               <span>Material Inventory</span>
             </a>
           </li>
         </ul>
        </div>
     </div>
   </div>

的Javascript

<script language="JavaScript">

    function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[""])[1].replace(/\+/g, '%20'))||null
    }

    myvar = getURLParameter('UserGroupId');

    document.write('The url parameter is: ' + myvar +'       ');

    if (myvar == 10102) {
        document.write('The url parameter is: ' + myvar +'     ');
        document.getElementById('cfiblinks').style.visibility = 'visible';
    } else {
        document.write('The url parameter is not : ' + myvar +'      ');
        document.getElementById('cfiblinks').style.visibility = 'hidden';
    }


</script>

非常感谢任何帮助。我怀疑document.getElementById。

有问题

3 个答案:

答案 0 :(得分:2)

您可以使用block或none设置display属性。

document.getElementById('cfiblinks').style.display = 'block'; //Will show
document.getElementById('cfiblinks').style.display = 'none'; //Will hide

答案 1 :(得分:1)

试试这个..

if (myvar == 10102) {

    document.write('The url parameter is: ' + myvar +'     ');
    document.getElementById('cfiblinks').setAttribute("style", "display:block");

} else {
   document.write('The url parameter is not : ' + myvar +'      ');
   document.getElementById('cfiblinks').setAttribute("style", "display:none");
  }

答案 2 :(得分:0)

尝试:

document.getElementById('something').style.display = "block";


document.getElementById('something').style.display = "none";