如何更改CSS的特征?

时间:2019-03-29 22:42:41

标签: php html css

我的CSS看起来像我的

style.css
~~~~~~~
.spanish{
display : initial;
}

.english{
display : initial;
}

并且我有一个类似HTML的

<HTML>
<head>
    <link rel=StyleSheet type="text/css" href="style.css" />
</head>
<body>
<input type="button" onclick="codecss.php" value = spanish>
<input type="button" onclick="codecss.php" value = english>
<input type="button" onclick="codecss.php" value = both>

<table>
<tr class= "spanish"><td> This is spanish text </td></tr>
<tr class = "english"><td> This is english text </td></tr>
<table>
</body>
<HTML>

现在我需要有关PHP的帮助。我想要一种方法,当我单击西班牙语时,我的HTML应仅显示西班牙语,如果单击英语,则应仅显示英语。两者都按下“两个”按钮。

如何根据html中按下的按钮从php编辑CSS ??? 请帮助/

1 个答案:

答案 0 :(得分:0)

我只是编写了一个基本代码段,希望对您有所帮助。谢谢

$('asd.languageChange').click(function() {
  var language = '.' + $(this).attr('id');
  $('.language').hide();
  $(language).show();
})
.spanish {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="english" class="languageChange">English</button>
<button id="spanish" class="languageChange">Spanish</button>

<table>
<tr class="spanish language"><td> This is spanish text </td></tr>
<tr class="english language"><td> This is english text </td></tr>
<table>

另一个选项。您也可以使用Javascript来做到这一点。

document.addEventListener("click", e => {
  if (e.target.matches(".languageChange")) {
   var hideAllLanguages = document.getElementsByClassName("language");
   for(var i = 0; i < hideAllLanguages.length; i++){
     hideAllLanguages[i].style.display = "none";
   }
   
   var showRequiredLanguage = document.getElementsByClassName(e.target.id);
   for(var i = 0; i < showRequiredLanguage.length; i++){
     showRequiredLanguage[i].style.display = "block";
   }
  }
});
.spanish {
  display: none;
}
<button id="english" class="languageChange">English</button>
<button id="spanish" class="languageChange">Spanish</button>

<table>
<tr class="spanish language"><td> This is spanish text </td></tr>
<tr class="english language"><td> This is english text </td></tr>
<table>