0

私の好奇心のために、次のような CSS のみのボタン マークアップが与えられた場合: http://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043 、次を使用して視覚的にボタンを作成できます。

<div class="button">Click</div>

しかし、実際に機能させるにはどうすればよいでしょうか。たとえば、他のページへのリンクを作成して、ユーザーがクリックするとリダイレクトされるようにします。

<a href>内にa をラップしようとしまし<div>たが、ボタンのテキストがリンクとして表示されますが、これは望ましくありません。私は反対のことも試しました - <div>a の内側をラップしました<a href>が、これはうまくいくようですが、これは有効なhtmlコードではないと言われました。

他の提案はありますか？

PS 対象となるブラウザは、IE8 以降、chrome 14 以降、Firefox 11 以降、Safari 5 以降、Opera 11 以降になります。

4

4 に答える 4

3

変更してみましたか

<div class="button">Click</div>

に<a class="button" href="#your_link">Click</a>？

これは通常のリンクとして機能し、css ボタンのスタイルと期待される動作を備えている必要があります。

于 2012-10-11T20:26:31.643 に答える
2

css に追加します。

a.button { text-decoration: none; }

ボタン リンクを作成するには:

<a class="button" href="/somewhere.html">Somewhere</a>
于 2012-10-11T20:25:50.530 に答える
2

JavaScript、特にjQueryを使用すると、次のことができます

  <div class="button" id="myButton">Click</div>


  $("#myButton").click(function()
  {
       location.href = "mypage.htm";
  });
于 2012-10-11T20:27:19.600 に答える
2

JavaScript を使用してアクションをボタンにバインドします。

function addEventHandler(elem,eventType,handler) {
     if (elem.addEventListener)
         elem.addEventListener (eventType,handler,false);
     else if (elem.attachEvent)
         elem.attachEvent ('on'+eventType,handler); 
}

addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
    document.location.href = "newpage.html";
});
于 2012-10-11T20:22:11.627 に答える