使用Javascript和選項卡來更改頁面內容

我想創建某種腳本，當我轉到新選項卡時將更改某些文本。我是一個JavaScript的noobie和好的與HTML和CSS。使用Javascript和選項卡來更改頁面內容

這裏是鏈接到我的工作至今： https://jsfiddle.net/gbjwn08y/

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body {font-family: "Lato", sans-serif;} 

.tablink { 
    background-color: #555; 
    color: white; 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    font-size: 17px; 
    width: 25%; 
} 

.tablink:hover { 
    background-color: #777; 
} 

/* Style the tab content */ 
.tabcontent { 
    color: white; 
    display: none; 
    padding: 50px; 
    text-align: center; 
} 

#London {background-color:red;} 
#Paris {background-color:green;} 
#Tokyo {background-color:blue;} 
#Oslo {background-color:orange;} 
</style> 
</head> 
<body> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

<div id="Oslo" class="tabcontent"> 
    <h3>Oslo</h3> 
    <p>Oslo is the capital of Norway.</p> 
</div> 

<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> 
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> 
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> 
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> 
<p> 
This text right here 
</p> 
<script> 
function openCity(cityName,elmnt,color) { 
    var i, tabcontent, tablinks; 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 
    tablinks = document.getElementsByClassName("tablink"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].style.backgroundColor = ""; 
    } 
    document.getElementById(cityName).style.display = "block"; 
    elmnt.style.backgroundColor = color; 

} 
// Get the element with id="defaultOpen" and click on it 
document.getElementById("defaultOpen").click(); 
</script> 

</body> 
</html>

因此，大家可以看到，我與文字工作的選項卡。我需要「此文本就在這裏」根據點擊哪個標籤進行更改。我也打算使用「此文本就在這裏」的預設字體。

任何幫助，將不勝感激

來源

2017-06-15 DenisG

什麼是「這段文字在這裏」應該改變什麼？ – j08691

您可以爲要顯示的每個文本塊創建一個元素，添加一個類它，它與相關的cityName匹配，當你點擊一個標籤，顯示在其課程中有cityName的文本塊並隱藏其餘部分。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body {font-family: "Lato", sans-serif;} 
 

 
.tablink { 
 
    background-color: #555; 
 
    color: white; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    font-size: 17px; 
 
    width: 25%; 
 
} 
 

 
.tablink:hover { 
 
    background-color: #777; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    color: white; 
 
    display: none; 
 
    padding: 50px; 
 
    text-align: center; 
 
} 
 

 
#London {background-color:red;} 
 
#Paris {background-color:green;} 
 
#Tokyo {background-color:blue;} 
 
#Oslo {background-color:orange;} 
 
.text { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="London" class="tabcontent"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div> 
 

 
<div id="Oslo" class="tabcontent"> 
 
    <h3>Oslo</h3> 
 
    <p>Oslo is the capital of Norway.</p> 
 
</div> 
 

 
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> 
 
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> 
 
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> 
 
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> 
 
<p class="Oslo text"> 
 
oslo 
 
</p> 
 
<p class="Paris text"> 
 
paris 
 
</p> 
 
<p class="Tokyo text"> 
 
tokyo 
 
</p> 
 
<p class="London text show"> 
 
london 
 
</p> 
 
<script> 
 
function openCity(cityName,elmnt,color) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablink"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].style.backgroundColor = ""; 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    elmnt.style.backgroundColor = color; 
 
    var texts = document.getElementsByClassName('text'); 
 
    for (var i = 0; i < texts.length; i++) { 
 
    \t if (texts[i].classList.contains(cityName)) { 
 
     \t texts[i].classList.add('show'); 
 
     } else { 
 
     \t texts[i].classList.remove('show'); 
 
     } 
 
    } 
 

 
} 
 
// Get the element with id="defaultOpen" and click on it 
 
document.getElementById("defaultOpen").click(); 
 
</script> 
 
    
 
</body> 
 
</html>

來源

2017-06-15 03:44:42

非常感謝！我知道有一個If命令可以使用，但我不知道如何使用它，因爲我是JavaScript新手。如果我想通過如果我打算這樣做，我還需要在id =

中加入？ – DenisG

的ID添加到您想要更改的元素，例如<p id="test">，然後添加以下內容：

document.getElementById('test').innerHTML = cityName;

後：

document.getElementById(cityName).style.display = "block"; 
elmnt.style.backgroundColor = color;

這將用城市名稱替換文本。希望你可以進一步定製你的需求。

來源

2017-06-15 03:45:08 Fushniki

試試這個：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body {font-family: "Lato", sans-serif;} 
 

 
.tablink { 
 
    background-color: #555; 
 
    color: white; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    font-size: 17px; 
 
    width: 25%; 
 
} 
 

 
.tablink:hover { 
 
    background-color: #777; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    color: white; 
 
    display: none; 
 
    padding: 50px; 
 
    text-align: center; 
 
} 
 

 
#London {background-color:red;} 
 
#Paris {background-color:green;} 
 
#Tokyo {background-color:blue;} 
 
#Oslo {background-color:orange;} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="London" class="tabcontent"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div> 
 

 
<div id="Oslo" class="tabcontent"> 
 
    <h3>Oslo</h3> 
 
    <p>Oslo is the capital of Norway.</p> 
 
</div> 
 

 
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> 
 
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> 
 
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> 
 
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> 
 
<p id="city"> 
 
I need this text to change 
 
</p> 
 
<script> 
 
function openCity(cityName,elmnt,color) { 
 
    var i, tabcontent, tablinks; 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 
    tablinks = document.getElementsByClassName("tablink"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].style.backgroundColor = ""; 
 
    } 
 
    document.getElementById(cityName).style.display = "block"; 
 
    elmnt.style.backgroundColor = color; 
 

 
var s = document.getElementById("city"); 
 
      s.innerHTML = cityName; 
 
} 
 
// Get the element with id="defaultOpen" and click on it 
 
document.getElementById("defaultOpen").click(); 
 
</script> 
 
    
 
</body> 
 
</html>

來源

2017-06-15 04:34:35

有很多方法可以解決這個。既然你沒有提到你想讓你的文本做什麼改變，我只是假設<p>中的文本是任何字符串。您可以添加兩個簡單的函數來處理這個：

function changeText(newText) { 
    let text = document.getElementById('text'); 
    text.innerHTML = newText; 
}; 

function handleTabClick(cityName, elmnt, color, newText) { 
    openCity(cityName, elmnt, color); 
    changeText(newText); 
}

在這種情況下，每個功能將負責的只有一兩件事，這可能是調試和未來的編輯好。

在此之後，採取兩個步驟：

添加id="text"到<p>元素
變化onClick處理您的按鈕是handleTabClick，並給予相應的參數。

要看到它的工作原理，單擊here

來源

2017-06-15 05:16:28

使用Javascript和選項卡來更改頁面內容

回答

相關問題