使用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和选项卡来更改页面内容

回答

相关问题