वहाँ एक रास्ता एक <a href ... tag?

Question

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?

Button currently looks like:

<button>Visit Page Now</button> 

What I would prefer not to have:

<a href="link.html"><button>Visit Page Now</button></a> 

The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.

Looking forward to hearing some options/opinions.

Answer 1

Inline Javascript:

<button onclick="window.location='http://www.example.com';">Visit Page Now</button> 

Defining a function in Javascript:

<script> 
    function visitPage(){ 
     window.location='http://www.example.com'; 
    } 
</script> 
<button onclick="visitPage();">Visit Page Now</button> 

or in Jquery

<button id="some_id">Visit Page Now</button> 

$('#some_id').click(function() { 
    window.location='http://www.example.com'; 
}); 

Answer 2

You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.

Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.

(actually, forget the second solution - if you can't use a form, the submit button is out)

Answer 3

Just do this

<button OnClick=" location.href='link.html' ">Visit Page Now</button> 

Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.

Answer 4

Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,

THE CSS

#btn{ background:url(images/button.jpg) no-repeat 0 0; display:block; width:50px; height:20px; border:none; outline:none;} 

THE HTML

<a href="btnlink.html" id="btn"></a> 

Answer 5

Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/

<button id="x">test</button> 

$('#x').click(function(){ 
    location.href='http://cnn.com' 
}) 

Answer 6

यहाँ में यह लपेटकर के बिना एक स्थान से जोड़ने के लिए एक तत्व प्राप्त करने के लिए एक समाधान है जो भी काम करेंगे जब JavaScript अक्षम है है है अपने <form> टैग के साथ बटन को घेरने के लिए।

मैं व्यक्तिगत रूप से <button> टैग पसंद करते हैं, लेकिन आप के रूप में अच्छी <input> साथ यह कर सकते हैं:

<form action="login.html"> 
    <input type="submit" value="Login"/> 
</form> 

Answer 7

<form action="portfolio.html"> <button type="link" class="btn btn-primary btn-lg">View Work</button> </form>

मैं सिर्फ यह पता लगा है, और यह मेरा डिफ़ॉल्ट बिना एक पृष्ठ पर पूरी तरह से लिंक मेरे बटन कक्षाओं सवारी पर लिंक सेटिंग्स! :)

Answer 8

बस एक साइड नोट - आप < a href> डिफ़ॉल्ट रूप से जानता है कि चालें पर विचार करना चाहेंगे लेकिन जावास्क्रिप्ट लिंकिंग आपके लिए नहीं करेगी। अर्थात्:

• यदि आप Ctrl के साथ क्लिक करते हैं, तो एक नया टैब खोला जाएगा;
• यदि आप Shift के साथ क्लिक करते हैं, तो ब्राउज़र एक नई विंडो में लिंक खोलता है;
• यदि आप Alt के साथ क्लिक करते हैं, तो यह "डाउनलोड लक्ष्य" कमांड है।

अब आप कि सभी व्यवहार अनुकरण करने के लिए नहीं करना चाहते हैं, मैं <, यह एक बटन की तरह एक href> और शैली का उपयोग करने के बाद से बटन ही मोटे तौर पर एक आकार और एक हॉवर प्रभाव है सुझाव देते हैं। मुझे लगता है कि अगर यह केवल "बटन और कुछ और नहीं" के लिए अर्थपूर्ण रूप से महत्वपूर्ण नहीं है, < a href> समुराई का मार्ग है। और यदि आप अर्थशास्त्र और पठनीयता के बारे में चिंता करते हैं, तो जब आपका दस्तावेज़ तैयार होता है तो आप बटन तत्व को भी प्रतिस्थापित कर सकते हैं()। यह स्पष्ट और सुरक्षित है।