如果javascript是開啓/關閉，隱藏和顯示html代碼

所以我有2個鏈接，我想要顯示如果javascript是關閉，當它關閉，並且當javascript關閉時，我想顯示其他2個鏈接與noscript標籤的位置。如果javascript是開啓/關閉，隱藏和顯示html代碼

我至今是：

-js這裏 - 顯示2個鏈接，如果JS是和隱藏，當它被禁用這裏 - -js

-noscript- 鏈接1 鏈接2 -noscript-

我只有PHP方面的經驗，對JavaScript不太熟悉。

什麼是最好的方式去做這件事？是否應該有某種JavaScript函數來使顯示/隱藏功能正常工作？但是如果javascript關閉，該函數將如何運行以隱藏鏈接？

如果有人能指出我正確的方向去解決這個問題或爲我提供一個簡單的代碼片段，我會非常感激。謝謝！

來源

2012-08-30 Kevin Jung

隱藏使用CSS的鏈接 - 默認情況下不可見

<a id="link1" href="#" style="display: none">Script link 1</a> 
<a id="link2" href="#" style="display: none">Script link 2</a>

顯示使用Javascript的聯繫 - 他們是唯一可見如果JavaScript，當然
```
<script type="text/javascript"> 
    document.getElementById('link1').style.display="block"; 
    document.getElementById('link2').style.display="block"; 
</script> 
```
的依賴您可以使用任何其他display屬性（默認情況下鏈接爲inline，我在此處添加block，根據需要使用）。
添加noscript東西 - 唯一可見當JavaScript關閉
```
<noscript> 
-two other links- 
</noscript> 
```

來源

2012-08-30 22:03:40 kapa

謝謝！忘了關於CSS :) –

我經常看到這與對身體標籤的CSS類來完成。例如：

<html> 
<head> 
    <style type="text/css"> 
    BODY A { display: none; } 
    BODY.script A { display: inherit; } 
    </style> 
</head> 
<body> 
    <a href="#">Shows with Script</a> 
</body> 
</html>

然後，您可以使用該腳本：

document.body.className = 'script';

對於支持JavaScript的瀏覽器中，script CSS類將被添加和BODY.script風格將被使用。否則，將使用常規的BODY款式。

然後，您可以準確定義您希望頁面上的任何元素在啓用或不啓用腳本的情況下顯示。同樣，你也可以將這個方法倒過來給BODY一個noscript風格，然後通過腳本將其刪除。

JSFiddle Link

來源

2012-08-30 22:06:32

+1這是一個整潔的技術。唯一的弱點是它可能會破壞身體上的其他類別。 – kapa

@bažmegakapa - 同意，如果你有一堆'BODY' CSS選擇器，最好定義一個'noscript' CSS類，它將在加載時被刪除。 –

這個效果很好，但附加到身體標籤導致我目前的代碼太多的問題！感謝您的幫助！ –

你也可以不用noscript，如下

HTML

<a href="" style="display:none" id='javascript_link1'>JS link-1</a> 
<a href="" style="display:none" id='javascript_link2'>JS link-2</a> 
<a href="" id='nonjs_link1'>link-1</a> 
<a href="" id='nonjs_link2'>link-2</a>

document.getElementById('javascript_link1').style.display="block"; 
document.getElementById('javascript_link2').style.display="block"; 
document.getElementById('nonjs_link1').style.display="none"; 
document.getElementById('nonjs_link2').style.display="none";

DEMO。

來源

2012-08-30 22:13:23

如果javascript是開啓/關閉，隱藏和顯示html代碼

回答

相關問題