链接不可点击？

时间：2015-04-02 07:37:42

标签： html css node.js

当我设计我的node.js应用程序时，我无法弄清楚为什么我的锚链接不起作用/不可点击。在我设计应用程序之前，代码本身工作正常。我需要配置一个CSS属性来解决这个问题吗？这是针对.player ul li链接的。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

  <script src="http://connect.soundcloud.com/sdk.js"></script>  

  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>

<!--  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> -->
  <meta charset="UTF-8">
  <title>Open Mic Chatroom</title>
</head>


<header>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a> -->
        <h1>OpenMic</h1>
    </div>
  </div>
</nav>
</header>

<body>

<div class="container">


  <div class="row">
<div class="musicians col-sm-3 col-md-3">
<!-- <div class="musicians col-sm-6 col-md-4"> -->

<!--   <div class="col-sm-6 col-md-4"> -->
    <!-- <div class="thumbnail musicians-box"> -->
<!--       <img src="..." alt="..."> -->
      <div class="caption">
        <h2>Musicians Online</h2>
        <p>
          <div id="chatters">

          </div>
        </p>
        <!-- <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> -->
<!--     </div> -->
  </div>
</div>



<div class="chatroom col-sm-8 col-md-8">
<!-- <div class="chatroom col-sm-6 col-md-4">
 --><!--   <div class="col-sm-6 col-md-4">-->    
<!-- <div class="thumbnail chatroom-box"> -->
     <!--  <img src="..." alt="..."> -->
      <div class="caption">
        <h2>Messages</h2>

        <div id="messagesContainer"></div>





     <!--  </div> -->
    </div>
        <form action="" id="chat_form">
      <input id="info" autocomplete="off" /> 
      <input type="submit" value="Submit">
    </form>
  </div>
</div>

</div>


<!--   <h3>Messages</h3>
  <div id="messagesContainer"></div>
    <form action="" id="chat_form">
      <input id="info" autocomplete="off" /> 
      <input type="submit" value="Submit">
    </form> -->

  <!-- SoundCloud Recording Feature -->
  <div class="row player">
    <div class="soundcloud-player">
    <ul>
    <div id="player">
     <!--  <button type="button" id="startRecording" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
      </button> -->
      <li id="startRecording"><a href="#">Start Recording</a></li>
    </div>

    <!--  <button type="button" id="stopRecording" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
      </button> -->
      <li id="stopRecording"><a href="#">Stop Recording</a></li>

 <!--       <button type="button" id="playBack" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
      </button> -->
      <li id="playBack"><a href="#">Play Recorded Sound</a></li>

   <!--    <button type="button" id="upload" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-open" aria-hidden="true"></span>
      </button> -->
      <li id="upload"><a href="#">Upload</a></li>
    </ul>
    <p class="status"></p>
    <div class="audioplayer">
      </div>
    </div>

    </div>
<!--     <script src="/socket.io/socket.io.js"></script> -->



    </div>

    <script>
    $(document).ready(function() {
      var trackUrl;
      //establish connection
      var socket = io.connect('http://localhost:3000'); 

      $('#chat_form').on('submit', function (e) {
        e.preventDefault();
        var message = $('#info').val();
        socket.emit('messages', message);
        $('#info').val('');
      });

      socket.on('messages', function (data) {
        console.log("new message received");
        $('#messagesContainer').append(data);
        $('#messagesContainer').append('<br>');

         // insertMessage(data);
      });

      socket.on('add_chatter', function (name) {
        var chatter = $('<li>' + name + '</li>').data('name', name);
        $('#chatters').append(chatter);
      });

      // //Embed SoundCloud player in the chat 
      // socket.on('track', function (track) {
      //   console.log("new track", track);
      //   SC.oEmbed(track, {auto_play: true}, function (oEmbed) {
      //     console.log('oEmbed response: ' + oEmbed);
      //   });
        // SC.stream(track, function (sound) {
        //   console.log("streaming", sound);
        //   sound.play();
        // });





      // // socket.on('remove chatter', function (name) {
      // //   $('#chatters li[data-name=]' + name + ']').remove();
      // });

      //SOUNDCLOUD RECORDING FEATURE
      function updateTimer(ms) {
      // update the timer text. Used when user is recording
        $('.status').text(SC.Helper.millisecondsToHMS(ms));
      }

      //Connecting with SoundCloud
      console.log("calling SoundCloud initialize");
      SC.initialize({
        client_id: "976d99c7318c9b11fdbb3f9968d79430",
        redirect_uri: "http://localhost:3000/auth/soundcloud/callback"
      });


      SC.connect(function() {
        SC.record({
          start: function() {
            window.setTimeout(function() {
              SC.recordStop();
              SC.recordUpload({
                track: { title: 'This is my sound' }
              });
            }, 5000);
          }
        });
        //Adds SoundCloud username to chat app
        console.log("connected to SoundCloud");

        SC.get('/me', function(me) { 
          console.log("me", me);
          socket.emit('join', me.username); 
        });

        // SC.get('/me/tracks', {}, function(tracks) {
        //   var myTracks = $("<div>");
        //   var heading = $("<h1>").text("Your tracks");
        //   var list = $("<ul>");
        //   tracks.forEach(function (single) {
        //     var listItem = $("<li>").text(single.permalink);
        //     listItem.on("click", function () {
        //        SC.oEmbed(single.permalink_url, {
        //         auto_play: true
        //       }, function(oEmbed) {
        //         console.log("oEmbed", oEmbed);
        //         $('.status').html(oEmbed.html);
        //       });
        //     });
        //     list.append(listItem);
        //   });
        //   $("body").append(myTracks.append(heading, list));
        // });

        // username = prompt("What is your username?");
        // socket.emit('join', username);   
      // });


        //Start recording link 
      $('#startRecording a').click(function (e) {
          $('#startRecording').hide();
          $('#stopRecording').show();
          e.preventDefault();
          SC.record({
            progress: function(ms, avgPeak) {
                updateTimer(ms);
            }
          });
      });

      //Stop Recording link
      $('#stopRecording a').click(function (e) {
        e.preventDefault();
        $('#stopRecording').hide();
        $('#playBack').show();
        $('upload').show();
        SC.recordStop();
      });

      //Playback recording link
      $('#playBack a').click(function (e) {
        e.preventDefault();
        updateTimer(0);
        SC.recordPlay({
          progress: function (ms) {
            updateTimer(ms);
          }
        });
      });

      //Uploaded SoundCloud Track after recorded
      $('#upload').click(function (e) {
          e.preventDefault();
          SC.connect({
            connected: function() {
              console.log("CONNECTED");
              $('.status').html("Uploading...");
              SC.recordUpload({
                track: {
                  title: 'My Recording',
                  sharing: 'public'
                }
              }, 
                //When uploaded track, provides link user, but not everyone
              function (track) {

                // console.log("TRACK", track);

                setTimeout(function () {
                  SC.oEmbed(track.permalink_url, {auto_play: true}, function(oEmbed) {
                    console.log("THIS IS oEMBED", oEmbed);
                    // console.log(oEmbed.html);
                    socket.emit('messages', oEmbed.html );
                    $('.status').html(oEmbed.html);
                  });
                }, 8000);
                // $('.status').html("Uploaded: <a href='" + track.permalink_url + "'>" + track.permalink_url + "</a>");
              });
            }
          });
      });

    });

  });

    </script>
</body>

</html>

CSS：

body {
  background: url('microphone.svg') no-repeat center center fixed;
    background-position: 4% 100%;
}

h1, h2, h3 {
  font-family: 'Bree Serif', serif; 

}



body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  color: white;
  padding-left: 5%;
  padding-bottom: 5%;
  letter-spacing: 4px;
}

.navbar-default {
  background-color: #000000;
 /* background-image: url('SoundWave.jpg');
  background-position: center;
  opacity: 0.8;*/
}

input, button, select, textarea {
  line-height: 3;
}

.chatroom, .musicians {

  border-style: solid;
  border-radius: 6%;
  border-color: black;
  margin-left: 20px;
  height: 500px;
  background-color: #F2F2F2;
  opacity: 0.8;
}

.musicians {
  height: fixed;
}

input#info {
  margin: 47% 1%;
  width: 656px;
  border-radius: 10%;
}

.visualSoundContainer__teaser {
  height: 100px;
}

.row {
  padding-top: 2%;
}

.player {
  text-align: center;
}

.player ul li {
  z-index: 30;
}

2 个答案:

答案 0 :(得分：0)

添加css 

 a{
 cursor:pointer;
 }

答案 1 :(得分：0)

评论保证金属性。它涵盖了该部分。你可以在选择锚元素的同时在firebug上查看它。

input#info {
    /*margin: 47% 1%;*/
      width: 656px;
      border-radius: 10%;
}

工作链接：http://jsfiddle.net/95yz0h63/

相关问题
最新问题