html - Javascript redirect when clicking on a div with a certain id - Stack Overflow

admin管理员组

文章数量:1324071

Here is an example of what I need help with: /

When the user clicks on “READ MORE” (under each subject or category) and the light grey box pops up with more information, I want it to automatically redirect to another page in 10 seconds.

I know how to redirect to a different page when an actual link is clicked, but not with certain events like this.

Here is some example of the code:

<h6 id="displayText" style="margin-top: 0px; cursor: pointer;"> 
<u>READ MORE</u> ABOUT FLAT ROOFING 
</h6>

I'm trying to redirect to a different page after 10 seconds when the id "displaytext" is clicked on.

Also, here is the code for the toggle text if you were wondering:

<script type="text/javascript"> 

    $(document).ready(function() {
      $("div#toggleText").hide();
      $("h6#displayText").click(function(){
        $(this).toggleClass("active");
        $(this).next("div#toggleText").slideToggle();
      });
    });
</script>

Here is an example of what I need help with: http://www.arbutusroofing./roofing-services/

When the user clicks on “READ MORE” (under each subject or category) and the light grey box pops up with more information, I want it to automatically redirect to another page in 10 seconds.

I know how to redirect to a different page when an actual link is clicked, but not with certain events like this.

Here is some example of the code:

<h6 id="displayText" style="margin-top: 0px; cursor: pointer;"> 
<u>READ MORE</u> ABOUT FLAT ROOFING 
</h6>

I'm trying to redirect to a different page after 10 seconds when the id "displaytext" is clicked on.

Also, here is the code for the toggle text if you were wondering:

<script type="text/javascript"> 

    $(document).ready(function() {
      $("div#toggleText").hide();
      $("h6#displayText").click(function(){
        $(this).toggleClass("active");
        $(this).next("div#toggleText").slideToggle();
      });
    });
</script>

• javascript
• html
• http-redirect
• dom-events

Share Improve this question Follow edited Apr 15, 2021 at 6:24 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 26, 2013 at 15:31 thetipsyhackerthetipsyhacker 1,41244 gold badges2020 silver badges4040 bronze badges 3

• 1 do you use jquery or an alternative? Or do you want a pure js solution. Can you show us some code? – peshkira Commented Jun 26, 2013 at 15:34
• You may want to have a look at Jquery for a start, and its sliding effects for example – Laurent S. Commented Jun 26, 2013 at 15:35
• Here is the code: <h6 id="displayText" style="margin-top: 0px; cursor: pointer;"> <u>READ MORE</u> ABOUT FLAT ROOFING </h6> I'm looking to redirect to a different page when the id "displaytext" is clicked on. Thanks. – thetipsyhacker Commented Jun 26, 2013 at 15:43

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You JS code:

   function OpenNewTab(id){
    setTimeout(function(){ window.location.href = "http://yourlinkhere/'+id+'"; }, 10000);

}

HTML:

<div onclick="OpenNewTab(1)">Readmore</div> // here 1 SHOULD BE UNIQUE ID AS PER RECORDS

You're probably looking for the javascript function setTimeout.

setTimeout(function(){ window.location.href = "http://somehwereblahblah"; }, 10000);

You can execute code with a delay using the setTimout function. An example of linking to google. 10 seconds after the 'click' div is clicked:

<div onclick='setTimeout(function(){window.location = "http://www.google."}, 10000)'>Click</div>

I think you can use settimeout function. Eg:

setTimeout("location.href = 'http://insert-target-url';",1500);

setTimeout need two arguments. First is the action that will be executed. It can be simple redirect mand, or event a function. The second one is the delay in milliseconds.

Hope this helps you.

本文标签： htmlJavascript redirect when clicking on a div with a certain idStack Overflow