根据Javascript函数输出显示不同的链接

时间:2015-04-27 07:04:37

标签: javascript html

我正在尝试根据用户在页面上显示不同的可能链接。例如,不允许移动用户向我们的数据库提交数据。我找到了一个检测移动用户的Javascript函数,但我无法通过它的输出来指示向用户显示的链接。事实上,当我尝试使用以下代码时,根本没有链接显示。

</head>
  <body>
    </div>
    <div id="topcontent">
      <p align="center">
        <div id="banner">
          <p align="center">
            <script>
            function checkMobile(){
              if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                <a href="studyAreas.html">
                Wifi Study Areas</a>
                <a href="displayspeeds.html">
                  View all Speeds</a>
                  <a href="bestlocation.html">
                    Best Speed Near You</a>
                        <a href="squadfree/index.html">
                        About Us</a>
              }
              else{
                <a href="studyAreas.html">
                Wifi Study Areas</a>
                <a href="displayspeeds.html">
                  View all Speeds</a>
                  <a href="bestlocation.html">
                    Best Speed Near You</a>
                    <a href="userEnterInfo.html">
                      Add Speed Data</a>
                        <a href="squadfree/index.html">
                        About Us</a>
              }
            }
            </script>
          </p>
      </div>

      <div id="centercontent">
        <h3 align="center">
          Find the best study space</h3>
          <h1 align="center">
            Check Your Internet Speed With WiFly</h1>
            <p align="center">
              <img src="http://cdn.flaticon.com/png/256/15402.png" alt="wifi" />
            </p>
            <p align="center">
            </p>
      </div>
  </body>

2 个答案:

答案 0 :(得分:2)

你不能直接在你的javascript中使用html代码。

<p id="content" align="center">

</p>

<script>
window.onload = function() {

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            document.getElementById("content").innerHtml = '<a href="studyAreas.html">...';
        }
        else{
            document.getElementById("content").innerHtml = '<a href="studyAreas.html">...';
        }

}
</script>

这将遵循您当前的方法。如果你只是在2个块中创建元素并且淡化所需的元素,那么它可能会更好(也更容易)。

<p id="content" align="center">
   <span id="mobile">...</span>

   <span id="desktop">...</span>
</p>

<script>

window.onload = function() {

        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            document.getElementById("desktop").style.display = 'none';
            document.getElementById("mobile").style.display = 'block';
        }
        else{
            document.getElementById("desktop").style.display = 'block';
            document.getElementById("mobile").style.display = 'none';
        }

}
</script>

如果使用jquery并且只是切换元素,那将更加容易。

重要说明:由此您无法确保人们不会将数据发布到您的数据库。你还应该在你的后端检查这个

更新:正如阿南德在评论中所说 - 你也应该重新考虑你的拳击。你不能在一个段落中添加一个div。如果直接向其添加文本,则只应使用段落。

答案 1 :(得分:2)

您不能直接在脚本标记内呈现HTML。 ASP.NET Rajor 中允许使用此语法,但 JavaScript 不允许使用此语法。

工作演示http://jsfiddle.net/2tLzrzz8/

您应该根据条件创建HTML字符串,然后将字符串指定为周围容器的sequenceCounter。为了获得更好的性能,您可以为容器添加唯一的innerHTML

HTML:

id

JavaScript的:

 <p align="center" id="linkContainer">
 </p>