使用javascript单击图像后的页面链接

Question

因此，我试图根据页面上按下的图像来简单地重新定位页面。 我之前有代码，但是要修复100件事，它不再起作用了。 谁能找出原因？

因此，当您现在单击页面上的cloudybubble.png图像时，它将带您到cloudy_name.php 。 还会有其他图像将您带到其他页面。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather</title>

<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
        <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="demo/scripts/execute.js"></script>


<script>
    function showWeather(_Weather) {
     //alert(Weather);
        myform._Weather.value=Weather;
    //  alert(Weather);

    // ._Weather
        myform.submit();



        }

    $(document).ready(function() {
        $('cloudybubble.png').click(function() {
            window.location="http://http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php;"
        });
    });

    // window.location="http://http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php"; //
</script>


</script>


<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 



<div id="weather">

<ul id="nav-reflection">
<form method="post" action="cloudy_name.php" id="myform">
        <li class="button-color-1"><a href="javascript:showWeather('cloudy')"; title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>

    <input type="hidden" name="weather" value="whatever">
</form>
</ul>
</div>

</body>
</html>

新剧本

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather</title>

<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
        <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="demo/scripts/execute.js"></script>


<script>
    function showWeather(_Weather) {
     //alert(Weather);
        myform._Weather.value=Weather;
    //  alert(Weather);

    // ._Weather
        myform.submit();



        }

    $('#cloudybubble').click(function() {
    window.location = "http://http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php;"
});

</script>


</script>


<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 



<div id="weather">

<ul id="nav-reflection">
<form method="post" action="cloudy_name.php" id="myform">
        <li class="button-color-1"><a href="javascript:showWeather('cloudy')"; title="My fancy link"><img id="cloudybubble" src="images/cloudybubble.png" width="211" height="180" align="left" />
</a></li>

    <input type="hidden" name="weather" value="whatever">
</form>
</ul>
</div>

</body>
</html>

Answer 1

编辑：修改以考虑注释中的新信息。

我们可以使您的页面上的所有图像都能正常使用，以便它们使用相同的JavaScript。

在HTML中，将超链接放回a标记中。 然后，将一个类添加到标签中，建议使用“ weatherLink”。 然后将您要登录的文本（即“多云”）放入数据库，并以该链接的ID为准。

HTML：

<li class="button-color-1">
    <a id="cloudy" class="weatherLink" href="http://www.tcnjart.com/christineaustin/whethertheweather/cloudy_name.php" title="My fancy link">
        <img src="images/cloudybubble.png" width="211" height="180" align="left" />
    </a>
</li>

现在，我们的JavaScript需要更新jQuery点击处理程序，如下所示。

JavaScript：

$(document).ready(function () {
    $('a.weatherLink').click(function (e) {
        e.preventDefault();
        showWeather(this.id);
        window.location.href = this.href;
        return false;
    });
});

现在，如果添加任何其他图像，只需将超链接保留在标记中，为它提供weatherLink类，并为其提供一个唯一的ID，该ID可以传递给showWeather（）。 给定正确的HTML，您无需再复制任何JavaScript。

这是一个jsFiddle测试页，供您查看结果： http : //jsfiddle.net/willslab/jkB9z/9/

Answer 2

向您的img标签添加一个id ，并在选择器中使用它。

Answer 3

您绝对应该在服务器端执行此操作。

如果您的用户没有javascript怎么办？ 相信我，其中有很多（主要是出于安全原因）。

将表单的操作定义到某些PHP页面，处理所需的更改或执行操作，并相应地重定向用户（使用header('Location: http://www.hi.com'); ）。

使用javascript单击图像后的页面链接

问题描述

3 个解决方案

解决方案1
1 2012-04-22 19:07:34

解决方案2
0 2012-04-22 19:08:04

解决方案3
0 已采纳 2012-04-22 21:06:42

使用javascript单击图像后的页面链接

问题描述

3 个解决方案

解决方案1 1 2012-04-22 19:07:34

解决方案2 0 2012-04-22 19:08:04

解决方案3 0 已采纳 2012-04-22 21:06:42

解决方案1
1 2012-04-22 19:07:34

解决方案2
0 2012-04-22 19:08:04

解决方案3
0 已采纳 2012-04-22 21:06:42