堆棧內存溢出
  簡體   English   中英

HTML / CSS / JS在Wordpress網站上無法正確顯示

[英]HTML/CSS/JS not displaying correctly on Wordpress website

 原文  2014-03-11 22:58:25  6   1    html/ wordpress

問題描述

我試圖在我的Wordpress頁面上包括一個簡單的復選框功能，以在您切換復選框時顯示/消失圖像。 它在Wordpress環境之外也可以正常工作，但是當我將代碼放入WP頁面時，僅顯示復選框，但沒有圖像。 單擊復選框也不會執行任何操作。

我嘗試了HTML Snippet和Raw HTML插件，但沒有幫助。 所以這是我最近的嘗試，創建頁面模板。

這是供您查看的頁面： http ://enchantingthedesert.com/10-photo-analysis/，密碼為：xX2CNFv6

提前致謝！ 這是代碼： 

<?php get_header() ?>


<!-- Part 1: Wrap all page content here -->
<section class="wrap">
  <!-- Begin page content -->
<div class="container">

  <div class="row-fluid">

  <html>

<meta charset="UTF-8">
<title>Photo Layers Toggling Demo</title>

<style>
  body {
    width:100%; 
  }

  .photo {
      position:absolute;
      display:block;
      left:0;
      top:0;
      width:100%;
      width:864px;
      height:100%;
      clear: both;

  }

  .photo img {
    width: 100%;  
  }

  .hidden {
    display:none; 
  }
  #photoContainer{

    display:inline-block;
    position:relative;
    float:right;
    width:100%;
    height:100%;
    clear: both;
  }

</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

  function initPhotoLayers(){
    console.log("initPhotoLayers running");

    var photosOnPage = $(".photo").length;
    console.log("initPhotoLayers says " + photosOnPage + " photos");

    for(var i=1;i<=photosOnPage;i++){

      var defaultDisplayTemp = $('.photo:nth-child(' + i + ')').data('defaultdisplay');
      console.log("initPhotoLayers saysdefaultDisplayTemp for " + i + " is " + defaultDisplayTemp);

      var currentPhotoDiv = $('.photo:nth-child(' + i + ')');

      if(defaultDisplayTemp == "hide"){
        //fade out photo to hide it
        currentPhotoDiv.fadeTo(0,0);
      } else {
        // fade in photo to show it
        currentPhotoDiv.fadeTo(1000,1);
      }
      // remove display=none in any case
      currentPhotoDiv.toggleClass("hidden");
    }





  }

  function initCheckboxes(){
    console.log("initCheckboxes running");
    $('#overlay_tint') 
      .bind('click',function(event){
        testCheckboxes(this.id);
      });

    $('#overlay_trails')
      .bind('click',function(event){
        testCheckboxes(this.id);
      });

    $('#overlay_placenames')
      .bind('click',function(event){
        testCheckboxes(this.id);
      }); 
    $('#overlay_trailnames')
      .bind('click',function(event){
        testCheckboxes(this.id);
      }); 

  }


  function testCheckboxes(checkbox){

    console.log("testCheckboxes running with checkbox at " + checkbox);

    checkTarget = checkbox.split("_")[1];

    if($("#" + checkbox).prop('checked')){

      console.log(checkbox + " is checked!"); 
      //$("#" + checkTarget).css("visibility","visible");
      $("#" + checkTarget).fadeTo(200,1);

     // true

    } else {

      console.log(checkbox + " is not checked!"); 
      //$("#" + checkTarget).css("visibility","hidden");
      $("#" + checkTarget).fadeTo(200,0);
    }
  }



  /*
var imageNum = 20;

images/Img + imageNum + -base.jpg


photos = {
  ["Img10-base.jpg","base"]
};*/


</script>

<style id="clearly_highlighting_css" type="text/css">/* selection */ html.clearly_highlighting_enabled ::-moz-selection { background: rgba(246, 238, 150, 0.99); } html.clearly_highlighting_enabled ::selection { background: rgba(246, 238, 150, 0.99); } /* cursor */ html.clearly_highlighting_enabled {    /* cursor and hot-spot position -- requires a default cursor, after the URL one */    cursor: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--cursor.png") 14 16, text; } /* highlight tag */ em.clearly_highlight_element {    font-style: inherit !important; font-weight: inherit !important;    background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow.png");    background-repeat: repeat-x; background-position: top left; background-size: 100% 100%; } /* the delete-buttons are positioned relative to this */ em.clearly_highlight_element.clearly_highlight_first { position: relative; } /* delete buttons */ em.clearly_highlight_element a.clearly_highlight_delete_element {    display: none; cursor: pointer;    padding: 0; margin: 0; line-height: 0;    position: absolute; width: 34px; height: 34px; left: -17px; top: -17px;    background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite.png"); background-repeat: no-repeat; background-position: 0px 0px; } em.clearly_highlight_element a.clearly_highlight_delete_element:hover { background-position: -34px 0px; } /* retina */ @media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {    em.clearly_highlight_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow@2x.png"); }    em.clearly_highlight_element a.clearly_highlight_delete_element { background-image: url("chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--delete-sprite@2x.png"); background-size: 68px 34px; } } </style><style>[touch-action="none"]{ -ms-touch-action: none; touch-action: none; }[touch-action="pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-action="pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-action="scroll"],[touch-action="pan-x pan-y"],[touch-action="pan-y pan-x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }</style>


<body>

<div id="photoContainer">
<div class="photo" style="z-index: 1900; opacity: 1; display: block;" id="placenames" data-defaultdisplay="hide">
  <img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-place-labels.png" data-defaultdisplay="hide" alt="" usemap="#locationMap">
  <map name="locationMap">
    <area shape="rect" coords="192,318,267,350" href="#" alt="berry butte">
    <area shape="rect" coords="195,324,273,345" href="#" alt="berry butte">
    <area shape="rect" coords="289,392,384,414" href="#" alt="horseshoe mesa">
    <area shape="rect" coords="104,426,197,446" href="#" alt="grandview trail">
    <area shape="rect" coords="346,316,458,335" href="#" alt="South Kaibob">
  </map>
</div>
<div class="photo" style="z-index: 900; opacity: 1; display: block;" id="trailnames" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-trail-names.png" alt=""></div>
<div class="photo" style="z-index: 800; opacity: 1; display: block;" id="trails" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-trails.png" alt=""></div>
<div class="photo" style="z-index: 700; opacity: 0; display: block;" id="tint" data-defaultdisplay="hide"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-tinting.jpg" alt=""></div>
<div class="photo" style="z-index: 600; opacity: 1; display: block;" id="bw" data-defaultdisplay="show"><img src="http://enchantingthedesert.com/wp-content/uploads/2014/02/10-bw-photo.jpg" alt=""></div>
</div>

<script>
$(document).ready(function(){
  initCheckboxes();
  initPhotoLayers()
});
</script>

<div style="display:inline; position: block; font-family: Adamina" id="imageControls">

  <form name="toggler">


  Display layers:
  <label>
    <input type="checkbox" name="Overlays" value="placenames" id="overlay_placenames">
    Place names</label> &nbsp; 

    <label>
    <input type="checkbox" name="Overlays" value="trails" id="overlay_trails" schecked="">
    Trails</label> &nbsp; 

 <label>
    <input type="checkbox" name="Overlays" value="trailnames" id="overlay_trailnames" schecked="">
    Trails names</label> &nbsp; 

      <label>
    <input type="checkbox" name="Overlays" value="tint" id="overlay_tint">
    Tinting</label>

  </form>
</div>

</body>

</html>

</section><!-- Wrap page -->

  </div><!-- Row page -->


  </div><!-- Content page -->

<?php get_footer() ?>

1 個解決方案

解決方案1
 0  2014-03-11 23:58:43

首先，您需要清除代碼。 看一下頁面源代碼，您會發現它完全是一團糟：您到了“頁面內頁”（嵌套<html>標簽），jQuery lib被調用了兩次（一次在<header> ） 。

嘗試清除html代碼以使其符合標准，刪除不必要的jQuery調用，然后再次將其檢出。 可能還有其他問題，但是在當前狀態下可能找不到或糾正-首先是第一件事:)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Safari無法正確顯示網站，CSS，HTML WordPress CSS無法正確顯示導航 網站的HTML布局無法正確顯示 HTML和CSS矩形無法正確顯示 包含的HTML / CSS Through <object> 顯示不正確 網站沒有顯示圖像或加載外部CSS，JS CSS漸變未在html5網站中正確應用 在Wordpress中使用js，css和html HTML至WordPress CSS元素無法正確顯示 將 html 和 css 網站遷移到 wordpress 問題
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM