2016-09-22 18 views
1

私は下記のHTMLページを持っている:私が欲しいものHTMLページをリロード自動的

$(document).ready(function() { 
 
    var showChar = 380; 
 
    var ellipsestext = "..."; 
 
    var moretext = "Read more"; 
 
    var lesstext = "Read less"; 
 
    var lesshtml=""; 
 
    var morehtml=""; 
 
    var content = $(".more").html(); 
 

 
    if(content.length > showChar) { 
 

 
    var lastChar = content.charAt(showChar); 
 
    if(lastChar == '/'){ 
 
     showChar = showChar+1; 
 
    } 
 
    var c = content.substr(0, showChar); 
 
    var h = content.substr(showChar-1, content.length - showChar); 
 

 
    var lesshtml = c + '<span class="moreelipses">'+ellipsestext+' <a href="" class="morelink">'+moretext+'</a></span>'; 
 
    var morehtml = content + '<span><a href="" class="morelink">'+lesstext+'</a></span>'; 
 
    $(".more").html(lesshtml); 
 
    } 
 

 
    $(".morelink").click(function(){ 
 

 
    if ($(this).text()==moretext){ 
 
     $(".more").html(morehtml); 
 
    }else{ 
 
     $(".more").html(lesshtml); 
 
    } 
 
    return false; 
 
    }); 
 
});
a { 
 
    color: #EA7813 
 
} 
 
a:visited { 
 
    color: #EA7813 \t 
 
} 
 
a.morelink { 
 
    text-decoration:none; 
 
    outline: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div class="more"> 
 
    <p>Can't reach the light switch when you walk into a room? Need one added near the door? If you would like to have a switch professionally installed in a location where no switch currently exists, one of our vetted, <strong>local electrical professionals</strong> will take care of your <strong>light switch installation </strong>and make sure it's working smoothly.</p> 
 
    <p><strong>What's included:</strong></p> 
 
    <ul> 
 
    <li>Install one (1) new gang box and associated wiring extension from existing circuit (up to 25')</li> 
 
    <li>Install and pair one (1) <strong>customer-supplied</strong> smart light switch in a new location <strong>-OR-</strong> provide and install one (1) standard single-pole switch and cover plate</li> 
 
    <li>Ensure all features are operating to maximum performance</li> 
 
    <li>Demonstrate basic device features</li> 
 
    <li>90-day labor warranty</li> 
 
    </ul> 
 
    <p><strong>Out of scope:</strong></p> 
 
    <ul> 
 
    <li>Smart switch not included, price includes installation only of smart switch -OR- providing and installing a standard switch</li> 
 
    <li>Requires existing, accessible electrical circuit within 25'</li> 
 
    <li>Drywall patching &amp; painting</li> 
 
    <li>Requires existing, compatible network</li> 
 
    <li>No diagnostic, repair or parts are included with this service</li> 
 
    <li>No non-stock parts, materials or system repair/upgrades are included with this service</li> 
 
    </ul> 
 
</div>

を体の拡大と縮小することです。拡張は正常に機能しますが、縮小するとページがリロードされます。私は再読み込みを中止したい。私のクリック機能では、以外の部分は決して発射されません。代わりに、ページがリロードされます。再ロードを停止し、以外のコードにコードを実行して、ボディが適切に縮小されるようにします。

+0

があります試してみましょうではないであろうHREFでjavascript:;を使用することができますあなたは確かに**ページをリロード**? –

+0

make a jsfiddle –

+0

@AdrianoRepettiこのコードをブラウザで実行すると、ブラウザにリロード記号が表示されます。しかし、私はそれがコードのためにリロードするとは思わない。コードのエラーが原因である可能性があります。 – naadyem

答えて

1

代わりのhrefに#を持っていることのデリゲートあなたのイベント

$('body').on('click','.morelink',function(e){ 
    e.preventDefault(); 
    //other code 
}); 
+1

あなたは私を打つ!もう一度お会いできてうれしいです。それは正解です。 –

+0

しかし、 'href =" "'はページをリロードしてはいけません。 – Rayon

+2

@Rayonはい、 'href =" "'は同じページを参照するリンクになります。したがって、本質的にはリロードです。 –

1

を、あなたは、URLの変更

var lesshtml = c + '<span class="moreelipses">'+ellipsestext+' <a href="javascript:;" class="morelink">'+moretext+'</a></span>'; 
      var morehtml = content + '<span><a href="javascript:;" class="morelink">'+lesstext+'</a></span>'; 
      $(".more").html(lesshtml); 
      } 
2

この

$(document).on('click', '.morelink', function(){ 
     if ($(this).text()==moretext){ 
     $(".more").html(morehtml); 
     } else { 
     $(".more").html(lesshtml); 
     } 
     return false; 
    }); 
関連する問題