Question

我想制作一个Clickable按钮，等待10秒钟来加载链接页面。我想知道它是否还需要Href吗？如果有人知道请问如何帮助我。

Answer 1

因为你已经标记了Javascript而不是jQuery ....

像

这样的东西

JavaScript的：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <GroupBox Header="Chart Area">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="0.5*" />
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right">Title:</Label>
            <TextBox Grid.Column="1"  Margin="2"  Grid.Row="0" Grid.ColumnSpan="4" ></TextBox>

            <Label Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center">X</Label>
            <Label Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center">Y</Label>
            <Label Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center">Width</Label>
            <Label Grid.Column="4" Grid.Row="1" HorizontalAlignment="Center">Height</Label>

            <Label Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right">Position:</Label>
            <TextBox Grid.Column="1" Grid.Row="2"  Margin="2"  Width="60"></TextBox>
            <TextBox Grid.Column="2" Grid.Row="2"  Margin="2"  Width="60"></TextBox>
            <TextBox Grid.Column="3" Grid.Row="2"  Margin="2"  Width="60"></TextBox>
            <TextBox Grid.Column="4" Grid.Row="2"  Margin="2"  Width="60"></TextBox>

            <Label Grid.Column="0" Grid.Row="3" HorizontalAlignment="Right">Colour:</Label>
            <Rectangle Margin="2" Fill="LightGreen" Stroke="Black" StrokeThickness="1" Grid.Column="1" Grid.Row="3" />
        </Grid>
    </GroupBox>
    <GroupBox Header="Plot Area" Grid.Column="0"  Grid.Row="1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1.4*" />
                <ColumnDefinition Width="0.6*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left">Imagine this was a particularly long title:</Label>
            <Rectangle Margin="10,2,10,2" Fill="AliceBlue" Grid.Column="1" Grid.Row="0" Stroke="Black" StrokeThickness="1" />
        </Grid>

    </GroupBox>
</Grid>

链接：

function loadUrl(){
  window.location.href = "http://www.google.com";
}

OR

JavaScript的：

<a href="JavaScript:setTimeout(loadUrl,10000)">Click My Link</a>

链接：

function delayUrlLoad(url, mils)
{
    setTimeout(function() {
        window.location.href = url;
    }, mils)
}

Answer 2

怎么样？

<强> HTML：

    <button id="yourbutton" href="https://www.google.com">
        Click Me
    </button>

<强>的jQuery / JS：

$( "#yourbutton" ).on( "click", function(event) {
  var url = $(this).attr('href');
  setTimeout("loadPage(url)", 10000);
  event.preventDefault();
});

function loadPage(url){
  window.location.href = url;
}

FIDDLE（它不会在JSFiddle中加载新页面，因为它是沙箱，但如果你检查控制台，它确实试图在超时后加载页面。）

Answer 3

您需要包含jQuery才能运行此代码，但这是一个想法

<a href="http://www.url.com">Click Me</a>
$("a").on("click", function (event) {
  event.preventDefault();
  var timeout = setTimeout(function () {
    var url = $(this).attr("href");
    location.replace(url);
  }, 10000);
});

Answer 4

这样：

HTML

<span id="link" data-href="http://www.google.it">click here</span>

JS

$('#link').on('click', function() {
    setTimeout(function() {
        location.href = $('#link').attr('data-href');
    }, 10000);
});

如何使Href链接等待

4 个答案: