Question

我正在尝试包含一个标记函数，就像我们在stackoverflow中一样。当我输入标签并按下输入时，在文本输入内部形成一个漂亮的标签。我的问题是当javascript / html php页面单独加载时它可以工作。但是当我在我的主页面中包含这个PHP它不起作用。这是我的tag.php页面

<link rel="stylesheet" type="text/css" href="./src/jquery.tagsinput.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="./src/jquery.tagsinput.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" />


<script type="text/javascript">
    function onAddTag(tag) {
        alert("Added a tag: " + tag);
    }
    function onRemoveTag(tag) {
        alert("Removed a tag: " + tag);
    }
    function onChangeTag(input,tag) {
        alert("Changed a tag: " + tag);
    }
    $(function() {
        $('#tags_2').tagsInput({
            width: 'auto',
            onChange: function(elem, elem_tags)
            {
                var languages = ['php','ruby','javascript'];
                $('.tag', elem_tags).each(function()
                {
                    if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
                        $(this).css('background-color', 'yellow');
                });
            }
        });
    });
</script>
<!-- body   -->
        <p><label>Tags</label>
        <input id="tags_2" type="text" class="tags" value="php,ios,javascript,ruby,android,kindle" /></p>

这是我的主页

<div id="insert" class="form-action show">
  <h1>Insert</h1>
  <p>

  </p>
  <form action="insert.php" method="post">
    <ul>

      <li>
        <?php include 'tag.php';?>
      </li>

      <li>
        <input type="submit" value=" Submit " name="submit" class="button" />
      </li>
    </ul>
  </form>
</div>

如果有帮助，请使用jquery.tagsinput.css

div.tagsinput {
  border: 1px solid #CCC;
  background: #FFF;
  padding: 5px;
  width: 300px;
  height: 100px;
  overflow-y: auto
}

div.tagsinput span.tag {
  border: 1px solid #a5d24a;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  display: block;
  float: left;
  padding: 5px;
  text-decoration: none;
  background: #cde69c;
  color: #638421;
  margin-right: 5px;
  margin-bottom: 5px;
  font-family: helvetica;
  font-size: 13px
}

div.tagsinput span.tag a {
  font-weight: 700;
  color: #82ad2b;
  text-decoration: none;
  font-size: 11px
}

div.tagsinput input {
  width: 80px;
  margin: 0 5px 5px 0;
  font-family: helvetica;
  font-size: 13px;
  border: 1px solid transparent;
  padding: 5px;
  background: 0 0;
  color: #000;
  outline: 0
}

div.tagsinput div {
  display: block;
  float: left
}

.tags_clear {
  clear: both;
  width: 100%;
  height: 0
}

.not_valid {
  background: #FBD8DB!important;
  color: #90111A!important
}

和主页css

@import url(http://fonts.googleapis.com/css?family=Roboto:100);
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
  background: #1a1a1a;
  color: white;
  font-family: 'Roboto';
}

.flat-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 80%;
  height: 450px;
  position: relative;
  font-family: 'Roboto';
}

.red-form {
  background: #e74c3c;
  margin: 25px auto;
  width: 80%;
  position: relative;
  font-family: 'Roboto';
  padding: 15px;
}

label {
  font-weight: bold;
}

.tabs {
  background: #c0392b;
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}

.tabs a {
  background: #c0392b;
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 12px 22px 12px 22px;
  /*border-right: 1px solid @tab-border;*/
}

.tabs li:last-child a {
  border-right: none;
  width: 174px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.tabs a.active {
  background: #e74c3c;
  border-right: none;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.form-action {
  padding: 0 20px;
  position: relative;
}

.form-action h1 {
  font-size: 42px;
  padding-bottom: 10px;
}

.form-action p {
  font-size: 12px;
  padding-bottom: 10px;
  line-height: 25px;
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=submit] {
  font-family: 'Roboto';
}

form input[type=text],
form input[type=password] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #000000;
  outline: none;
  font-weight:bold;
}

.dark-box {
  background: #5e0400;
  box-shadow: 1px 3px 3px #3d0100 inset;
  height: 40px;
  width: 50px;
}

.form-action .dark-box.bottom {
  position: absolute;
  right: 0;
  bottom: -24px;
}

.tabs + .dark-box.top {
  position: absolute;
  right: 0;
  top: 0px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.button {
  border: none;
  display: block;
  background: #136899;
  height: 40px;
  width: 80px;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
  /*box-shadow: 0px 3px 1px #2075aa;*/
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  transition: all 0.15s linear;
  font-weight: bold;
}

.button:hover {
  background: #1e75aa;
  /*box-shadow: 0 3px 1px #237bb2;*/
}

.button:active {
  background: #136899;
  /*box-shadow: 0 3px 1px #0f608c;*/
}

::-webkit-input-placeholder {
  color: #e74c3c;
  font-weight: bold;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #e74c3c;
  font-weight: bold;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #e74c3c;
  font-weight: bold;
}

:-ms-input-placeholder {
  color: #e74c3c;
  font-weight: bold;
}

select {
  margin: 10px;
  border: 1px solid #111;
  background: transparent;
  width: 300px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  font-weight: bold;
  color: #504848;
}

#black-text {
    color: rgb(242, 255, 63);
    font-weight: bold;
    font-family: 'Roboto';
}

#dbutton {
    border: none;
    display: block;
    background: #136899;
    height: 40px;
    width: 130px;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 3px 1px #2075aa;
    -webkit-transition: all 0.15s linear;
      -moz-transition: all 0.15s linear;
      transition: all 0.15s linear;
      font-weight: bold;

}

#dbutton:hover {
  background: #1e75aa;
  box-shadow: 0 3px 1px #237bb2;
}

#dbutton:active {
  background: #136899;
  box-shadow: 0 3px 1px #0f608c;
}

#mdbutton {
    border: none;
    display: block;
    background: #136899;
    height: 25px;
    width: 65px;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 3px 1px #2075aa;
    -webkit-transition: all 0.15s linear;
      -moz-transition: all 0.15s linear;
      transition: all 0.15s linear;
      font-weight: bold;

}

#mdbutton:hover {
  background: #1e75aa;
  box-shadow: 0 3px 1px #237bb2;
}

#mdbutton:active {
  background: #136899;
  box-shadow: 0 3px 1px #0f608c;
}

.datagrid table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.datagrid {
  font: normal 12px/150% Arial, Helvetica, sans-serif;
  background: #fff;
  overflow: hidden;
  border: 1px solid #006699;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.datagrid table td,
.datagrid table th {
  padding: 3px 10px;
}

.datagrid table thead th {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
  background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
  background-color: #006699;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  border-left: 1px solid #0070A8;
}

.datagrid table thead th:first-child {
  border: none;
}

.datagrid table tbody td {
  color: #00496B;
  border-left: 1px solid #E1EEF4;
  font-size: 12px;
  font-weight: normal;
}

.datagrid table tbody .alt td {
  background: #E1EEF4;
  color: #00496B;
}

.datagrid table tbody td:first-child {
  border-left: none;
}

.datagrid table tbody tr:last-child td {
  border-bottom: none;
}

.datagrid table tfoot td div {
  border-top: 1px solid #006699;
  background: #E1EEF4;
}

.datagrid table tfoot td {
  padding: 0;
  font-size: 12px
}

.datagrid table tfoot td div {
  padding: 2px;
}

.datagrid table tfoot td ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

.datagrid table tfoot li {
  display: inline;
}

.datagrid table tfoot li a {
  text-decoration: none;
  display: inline-block;
  padding: 2px 8px;
  margin: 1px;
  color: #FFFFFF;
  border: 1px solid #006699;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
  background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
  background-color: #006699;
}

.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
  text-decoration: none;
  border-color: #006699;
  color: #FFFFFF;
  background: none;
  background-color: #00557F;
}

div.dhtmlx_window_active,
div.dhx_modal_cover_dv {
  position: fixed !important;
}


table, th, td {
    border: 1px solid black;
    padding: 5px;
    text-align: center;
}

Answer 1

在您的 main.php标题

中加载jquery

 <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>tag</title>
        <meta name="description" content="">
        <meta name="author" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <link rel="stylesheet" href="enter.css">
            <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> //changes here



</head>
<body>

    <div class="container">
        <div class="flat-form">
            <div id="insert" class="form-action show">
                <h1>Insert</h1>
                <p>

                </p>
                <form action="insert.php" method="post">
                    <ul>

        <li>
           <?php include ('tag.php');?>
        </li>

                        <li>
                            <input type="submit" value=" Submit " name="submit" class="button"/>
                        </li>
                    </ul>
                </form>
            </div>
        </div>  
    </div>
    <script src="enter.js"></script>
</body>
</html>

javascript包括为php无法正常工作

1 个答案: