Имеет ту же проблему: удалили границу мимики и сообщение из заголовка и все сработало.
$header = "From: ".$from_name." <".$from_mail.">\n";
$header .= "Reply-To: ".$replyto."\n";
$header .= "MIME-Version: 1.0\n";
$header .= "Content-Type: multipart/mixed; boundary=\"".$uid."\"\n\n";
$emessage= "--".$uid."\n";
$emessage.= "Content-type:text/plain; charset=iso-8859-1\n";
$emessage.= "Content-Transfer-Encoding: 7bit\n\n";
$emessage .= $message."\n\n";
$emessage.= "--".$uid."\n";
$emessage .= "Content-Type: application/octet-stream; name=\"".$filename."\"\n"; // use different content types here
$emessage .= "Content-Transfer-Encoding: base64\n";
$emessage .= "Content-Disposition: attachment; filename=\"".$filename."\"\n\n";
$emessage .= $content."\n\n";
$emessage .= "--".$uid."--";
mail($mailto,$subject,$emessage,$header);
у вас есть другое решение:
JS: вызвать функцию при событии загрузки с «Description» в виде аргумента
openCity(event, 'Description')
CSS: добавить активный класс и добавить его в первый дивизион
.tabcontent.active {
display:block;
}
Еще один CSS: оберните весь ваш .tabcontent в div, а затем
.tabcontent:first-of-type {
display:block;
}
, но последний имеет больше преимуществ перед другими, так как он более удобен в будущих функциях, которые у вас будут.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
display:block;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* HERE */
.tabcontent.active {
display:block;
}
/* Or you can add a wrapper for your contents
and then use this selector, to set your default.*/
.tabcontent:first-of-type {
display:block;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div>
<div id="Description" class="tabcontent">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</div>
</body>
</html>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Добавьте style="display: block;"
к вашему div-элементу tabcontent, чтобы показать ваш div по умолчанию.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
display:block;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div id="Description" class="tabcontent" style="display: block;">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</body>
</html>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Добавить стиль display:block
из Description
содержимого вкладок при загрузке
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
display:block;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body onload="loadFunction()">
<div class="tab">
<button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div id="Description" class="tabcontent">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</body>
</html>
<script>
function loadFunction(){
document.getElementById('Description').style.display = "block";
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Вы можете использовать Javascript, чтобы «щелкнуть» по указанной кнопке вкладки:
document.getElementById("default").click();
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sight_img{
height: 80%;
width: 100%;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
display:block;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" id="default" onclick="openCity(event, 'Description')">Description</button>
<button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
<button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
<button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
</div>
<!-- // content-tabs-i // -->
<div id="Description" class="tabcontent">
<h3>Description</h3>
</div>
<div id="Avalability" class="tabcontent">
<h3>Avalability</h3>
</div>
<div id="Itinerary" class="tabcontent">
<h3>Itinerary</h3>
</div>
<div id="Policy" class="tabcontent">
<h3>Policy</h3>
</div>
</body>
</html>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("default").click();
</script>