Salut,
<<<EDIT
a écrit :
Aujourd'hui, un client veut qu'apres avoir selectionne une option dans un menu deroulant, cela ouvre le lien dans une autre page (c'est son choix).
Est ce que cette page fait parti d'un vrai formulaire ?
<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<title>J'aime Schnaps.it</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/knacss.css" media="all">
<link rel="stylesheet" href="css/styles.css" media="all">
<style type="text/css">
.btn ul{display: none;}
.btn:hover ul{display: block;}
</style>
</head>
<body>
<form action="#" method="post">
<!-- etc. -->
<fieldset class="btn">
<legend>choisir sa newletter</legend>
<ul>
<li><input type="radio" name="choixNl" id="alsacreations" value="http://alsacreations.com"><label for="alsacreations">alsacreations</label></li>
<li><input type="radio" name="choixNl" id="google" value="http://google.fr"><label for="google">google</label></li>
</ul>
</fieldset>
<!-- etc. -->
</form>
<script type="text/javascript">
window.addEventListener('load',function(){
var elBtn = document.querySelectorAll('.btn ul li');
for (var clef = 0; clef < elBtn.length; clef++) {
elBtn[ clef ].addEventListener('click',function(){
window.open(this.querySelector('input').value,this.querySelector('label').innerHTML);
});
}
});
</script>
</body>
</html>
Si ce n'est pas le cas d'un vrai formulaire, c'est une mauvaise utilisation flagrante du select.
et de l'élément form aussi. Dans ce cas là, tu devrais dire à ton client que ce n'est pas accessible et qu'il n'y a pas de référencement sur les liens avec cette méthode JS (js intrusif / obstructif pour rien). S'il ne veut pas qu'il y ait un référencement sur ces pages, il suffit de rajouter l'attribut rel avec la valeur no-follow dans les éléments "a".
<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<title>J'aime Schnaps.it</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/knacss.css" media="all">
<link rel="stylesheet" href="css/styles.css" media="all">
<style type="text/css">
.btn ul{display: none;}
.btn:hover ul{display: block;}
</style>
</head>
<body>
<div class="btn">
<span>choisir sa newletter</span>
<ul>
<li><a href="http://google.fr" target="_blank">google</a></li>
<li><a href="http://alsacreations.com" target="_blank">alsa</a></li>
<li><a href="http://yahoo.fr" target="_blank">yahoo</a></li>
</ul>
</div>
</body>
</html>
;)
EDIT;
Modifié par niuxe (18 May 2014 - 01:14)
