javascript - 节点Jquery将页面加载到div错误

Question

// Userlist data array for filling in info box
var userListData = [];

// DOM Ready =============================================================
$(document).ready(function() {

    // Populate the user table on initial page load
    populateTable();
	
    // Username link click
    $('#userList table tbody').on('click', 'td a.linkshowuser', showUserInfo);
	// Add User button click
    $('#btnAddUser').on('click', addUser);
	
    // Delete User link click
    $('#userList table tbody').on('click', 'td a.linkdeleteuser', deleteUser);
	 
	 //Set Default page to Home.html
	$('#content').load('views/home.html');
	
	//Call navBar function
	navBar();
	projectBtn();

});


// Functions =============================================================
	
	//Navbar function
function navBar()	{
	
	$('ul#navtest li a').click(function()	{
		var page = $(this).attr('title');
		$('#content').fadeOut(400);
		setTimeout(function(){$('#content').load('views/' + page + '.html')}, 400);
		$('#content').fadeIn(400);
		return false;
	});
}

function projectBtn()	{
	
	$('a.projectbutton').click(function()	{
		var page = $(this).attr('title');
		$('#content').fadeOut(400);
		setTimeout(function(){$('#content').load('views/' + page + '.html')}, 400);
		$('#content').fadeIn(400);
		return false;
	});
}




// Fill table with data
function populateTable() {

    // Empty content string
    var tableContent = '';

    // jQuery AJAX call for JSON
    $.getJSON( '/users/userlist', function( data ) {

    // Stick our user data array into a userlist variable in the global object
    userListData = data;

        // For each item in our JSON, add a table row and cells to the content string
        $.each(data, function(){
            tableContent += '<tr>';
            tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.username + '">' + this.username + '</a></td>';
            tableContent += '<td>' + this.email + '</td>';
            tableContent += '<td><a href="#" class="linkdeleteuser" rel="' + this._id + '">delete</a></td>';
            tableContent += '</tr>';
        });

        // Inject the whole content string into our existing HTML table
        $('#userList table tbody').html(tableContent);
    });
};


// Show User Info
function showUserInfo(event) {

    // Prevent Link from Firing
    event.preventDefault();

    // Retrieve username from link rel attribute
    var thisUserName = $(this).attr('rel');

    // Get Index of object based on id value
    var arrayPosition = userListData.map(function(arrayItem) { return arrayItem.username; }).indexOf(thisUserName);

    // Get our User Object
    var thisUserObject = userListData[arrayPosition];

    //Populate Info Box
    $('#userInfoName').text(thisUserObject.fullname);
    $('#userInfoAge').text(thisUserObject.age);
    $('#userInfoGender').text(thisUserObject.gender);
    $('#userInfoLocation').text(thisUserObject.location);

};


// Add User
function addUser(event) {
    event.preventDefault();

    // Super basic validation - increase errorCount variable if any fields are blank
    var errorCount = 0;
    $('#addUser input').each(function(index, val) {
        if($(this).val() === '') { errorCount++; }
    });

    // Check and make sure errorCount's still at zero
    if(errorCount === 0) {

        // If it is, compile all user info into one object
        var newUser = {
            'username': $('#addUser fieldset input#inputUserName').val(),
            'email': $('#addUser fieldset input#inputUserEmail').val(),
            'fullname': $('#addUser fieldset input#inputUserFullname').val(),
            'age': $('#addUser fieldset input#inputUserAge').val(),
            'location': $('#addUser fieldset input#inputUserLocation').val(),
            'gender': $('#addUser fieldset input#inputUserGender').val()
        }

        // Use AJAX to post the object to our adduser service
        $.ajax({
            type: 'POST',
            data: newUser,
            url: '/users/adduser',
            dataType: 'JSON'
        }).done(function( response ) {

            // Check for successful (blank) response
            if (response.msg === '') {

                // Clear the form inputs
                $('#addUser fieldset input').val('');

                // Update the table
                populateTable();

            }
            else {

                // If something goes wrong, alert the error message that our service returned
                alert('Error: ' + response.msg);

            }
        });
    }
    else {
        // If errorCount is more than 0, error out
        alert('Please fill in all fields');
        return false;
    }
};


// Delete User
function deleteUser(event) {

    event.preventDefault();

    // Pop up a confirmation dialog
    var confirmation = confirm('Are you sure you want to delete this user?');

    // Check and make sure the user confirmed
    if (confirmation === true) {

        // If they did, do our delete
        $.ajax({
            type: 'DELETE',
            url: '/users/deleteuser/' + $(this).attr('rel')
        }).done(function( response ) {

            // Check for a successful (blank) response
            if (response.msg === '') {
            }
            else {
                alert('Error: ' + response.msg);
            }

            // Update the table
            populateTable();

        });

    }
    else {

        // If they said no to the confirm, do nothing
        return false;

    }

};

.border {
  border: 4px solid black; }

.back2 {
  background-color: #232323; }

.marginleft {
  margin-left: 8%; }

.margin {
  margin-right: 4%;
  margin-left: 4%;
  margin-top: 2%;
  margin-bottom: 2%; }

.padding {
  padding: 1%; }

.margintop {
  margin-top: 1%; }

.margintop2 {
  margin-top: 5%; }

.iconmargintop {
  margin-top: 50px; }

.fill {
  height: 100%;
  width: 100%; }

p {
  color: #ffffff; }

label {
  color: #ffffff; }

h1 {
  color: #ffffff; }

h2 {
  color: #ffffff; }

th {
  color: #ffffff; }

span {
  color: #ffffff; }

h3 {
  color: #ffffff; }

.projectseltext {
  padding: 1%;
  margin: 1%; }

.background {
  background-color: #333333;
  position: relative;
  height: 100%; }

#blacktext {
  color: black; }

.disablelink {
  pointer-events: none;
  cursor: default; }

.nav {
  background-color: #b2b2b2; }

.nav a {
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase; }

.nav li {
  display: inline; }

.back1 {
  background-color: #0c0c0c; }

.fit {
  height: 100%;
  width: 100%; }

.well {
  background-color: #333333; }

.backg1 {
  background-color: #333333; }

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
  </head>
  <body>
    <div id="project">
      <div class="container-fluid row">
        <a href="#" title="projectnew" class="projectbutton">
          <div class="back2 col-md-11 margin border">
            <img src="images/ph.jpg" class="thumbnail margin col-md-3" style="width:150px;" />
            <h1 class="margin" style="margin-top:75px;">New Projects</h1>
          </div>
        </a>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css" />
    <link rel="stylesheet" href="stylesheets/main.css" />
    <script src="build/js/jquery-2.2.4.min.js"></script>
    <script src="build/js/bootstrap.min.js"></script>
    <script src="build/js/global.js"></script>
    <title></title>
  </head>
  <body class="background">
    <div class="container-fluid nav navbar-inverse">
      <ul id="navtest" class="margintop">
        <li>
          <a href="#" title="home" id="blacktext">Home</a>
        </li>
        <li>
          <a href="#" title="project" id="blacktext">Projects</a>
        </li>
        <li>
          <a href="#" title="contact" id="blacktext">Contact</a>
        </li>
        <li>
          <a href="#" title="resume" id="blacktext">Resume</a>
        </li>
        <li>
          <a href="#" title="about" id="blacktext">About</a>
        </li>
        <li>
          <a href="#" title="database" id="blacktext">Database</a>
        </li>
      </ul>
    </div>
    <div id='content' class="tab-content" />
  </body>
</html>

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
  </head>
  <body>
    <div id="projectnew">
      <div class="row">
        <div class="container col-md-12 margintop marginleft">
          <a href="#project" data-toggle="tab">Back</a>
        </div>
        <div class="container-fluid margin">
          <a href="" data-toggle="tab">
            <div class="back2 col-md-11 margin border">
              <img src="images/ph.jpg" class="thumbnail margin" style="width:150px" />
              <h1 class="margin">Comming soon.</h1>
            </div>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

这个文件是临时的，我知道里面的内容不会做任何事情。

功能 navBar 工作完美，但是当尝试将相同的方法应用于另一个类和 div 时，它似乎失败了。

每当我单击 projectbutton 类时，它都会重定向到 error.html。出于某种原因，javascript 在单击时没有看到/处理该类，并且 href 是不受支持的类型，将我重定向到 error.html。但是我不确定我的代码有什么问题。

Answer 1

欢迎;

在您的 HTML 代码中，<a href="projectnew" class="projectbutton">你的 a 元素有一个 href，如果你点击它，它将转到页面“www.yourdomain.com/projectnew”，因为这个页面不存在，你将被重定向到你的错误页面......

---

要解决这个问题，您应该使用 preventDefault，以防止您的链接元素操作您不想要的东西。

    $('a.projectbutton').click(function(event)  {
        event.preventDefault();
        var page = $(this).attr('href');
        $('#content').fadeOut(400);
        setTimeout(function(){$('#content').load('views/' + page + '.html')}, 400);
        $('#content').fadeIn(400);
        return false;
    });

我没有试过，但应该可以。

阅读有关 preventDefault 的更多信息:https://api.jquery.com/event.preventdefault/

---

或；

由于主要问题是您的 a 元素中的 href 属性，请尝试删除它们；

<a href="#" title="home" id="blacktext">Home</a>

在 JS 中使用标题作为说明符；

$('a.projectbutton').click(function()   {
    var page = $(this).attr('title'); //changed this into title.
    $('#content').fadeOut(400);
    setTimeout(function(){$('#content').load('views/' + page + '.html')}, 400);
    $('#content').fadeIn(400);
    return false;
});