Dynamiczne ukrycie/rozwinięcie zakładki po kliknięciu

**P3neR** · (Ten post był ostatnio modyfikowany: 05.11.2018, 13:58 przez Ardex.)

Adres forum:
[http://webmybb.ct8.pl/index.php]

Wersja silnika:
[1.8.19]

Opis problemu:
[Chciałbym dodać 3 zakladki w profilu Ogólne, Dodatkowe, Kontakt które po kliknieciu w która zakladke rozsuwa sie lub sie zmienia. W ogólnych Informacje o Nick, Dodatkowe informacje o Nick, i Kontakt] Tutaj proszę ssy gdzie ma sie to znajdować.

**Ardex** · 05.11.2018, 13:16

Proste do zrobienia w jQuery, próbowałeś?
Wklej tu szablon member_profile i member_profile_contact_details

**P3neR** · 05.11.2018, 13:20

<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>

</head>

<body>

{$header}

<section id="profile">

 <div class="header">

 <div class="upper">

 <div class="row">

 <h1>{$formattedname}</h1>

 <h2>{$displaygroup['title']}</h2>

 </div>

 {$sendpm}

 </div>

 <div class="lower">

 <div class="avatar">{$avatar}</div>

 <div class="info">

 <div class="row">

 <h3>Zawartość</h3>

 {$memprofile['postnum']}

 </div>

 <div class="row">

 <h3>Rejestracja</h3>

 {$memregdate}

 </div>

 <div class="row">

 <h3>Ostatatnia wizyta</h3>

 {$memlastvisitdate}

 </div>

 </div>

 {$findposts}

 </div>

 </div>

<!-- Header/Main -->

 <div class="main">

 <div class="row left">

 <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">

 <tr>

 <td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>

 </tr>

 <tr>

 <td class="trow1"><strong>Tytuł:</strong></td>

 <td class="trow1">{$usertitle}</td>

 </tr>

 <tr>

 <td class="trow1"><strong>{$lang->joined}</strong></td>

 <td class="trow1">{$memregdate}</td>

 </tr>

 {$reputation}

 {$warning_level}

 </table> 

 {$contact_details}

 {$profilefields} 

 {$modoptions}

 {$adminoptions}

 </div>

 <!-- Left/Right -->

 <div class="row right">

 {$lastpost}

 </div>

 </div>

</section>

{$footer}

</body>

</html>

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">

 <tr>

 <td colspan="2" class="thead"><strong>{$lang->users_contact_details} </strong></td>

 </tr>

 <colgroup>

 <col style="width: 30%;" />

 </colgroup>

 {$website}

 {$sendemail}

 {$contact_fields['icq']}

 {$contact_fields['aim']}

 {$contact_fields['yahoo']}

 {$contact_fields['skype']}

 {$contact_fields['google']}

</table>

**Ardex** · (Ten post był ostatnio modyfikowany: 05.11.2018, 14:01 przez Ardex.)

member_profile zamień na to

<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>

</head>

<body>

{$header}

<section id="profile">

<div class="header">

<div class="upper">

<div class="row">

<h1>{$formattedname}</h1>

<h2>{$displaygroup['title']}</h2>

</div>

{$sendpm}

</div>

<div class="lower">

<div class="avatar">{$avatar}</div>

<div class="info">

<div class="row">

<h3>Zawartość</h3>

{$memprofile['postnum']}

</div>

<div class="row">

<h3>Rejestracja</h3>

{$memregdate}

</div>

<div class="row">

<h3>Ostatatnia wizyta</h3>

{$memlastvisitdate}

</div>

</div>

{$findposts}

</div>

</div>

<!-- Header/Main -->

<div class="main">

    <div class="nav_profile_info_links">

        <span class="member_profile_nav_link_1">Podstawowe</span> 

        <span class="member_profile_nav_link_2">Dodatkowe</span> 

        <span class="member_profile_nav_link_3">Kontakt</span>

    </div>

<div class="row left">

    <div class="member_profile_nav_content_1 member_profile_nav_content_2">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">

<tr>

<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>

</tr>

<tr>

<td class="trow1"><strong>Tytuł:</strong></td>

<td class="trow1">{$usertitle}</td>

</tr>

<tr>

<td class="trow1"><strong>{$lang->joined}</strong></td>

<td class="trow1">{$memregdate}</td>

</tr>

{$reputation}

{$warning_level}

</table> 

</div>

<div class="member_profile_nav_content_3">

{$contact_details}

</div>

{$profilefields} 

{$modoptions}

{$adminoptions}

<script>

$(document).ready(function() {

    $(".nav_profile_links span").click(function() {

      var clickedElementClassName = $(this).attr("class");

      var numberOfClickedElement = clickedElementClassName.match(/\d/)

      $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);

      $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)

    })

})

</script>

</div>

<!-- Left/Right -->

<div class="row right">

{$lastpost}

</div>

</div>

</section>

{$footer}

</body>

</html>

i do arkusz css

.nav_profile_info_links {

    font-size: 30px;

}

.member_profile_nav_content_1, .member_profile_nav_content_2, .member_profile_nav_content_3 {

  display: none;

}

Przyciski Podstawowe i Dodatkowe pokazują to samo, bo nie wiem czym one się miały różnić. Buttony te wymagają ostylowania ale z tym sobie już chyba poradzisz.

edit, zjadłem parę rzeczy, teraz jest poprawny kod wrzucony

**P3neR** · 05.11.2018, 14:15

Jest wszystko tak jak napisałeś lecz gdy klikam na podstawowe to nie ma zadnych informacji tak samo jak i w reszcie ;/

**Ardex** · (Ten post był ostatnio modyfikowany: 05.11.2018, 14:25 przez Ardex.)

Zobacz tak

<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>

</head>

<body>

{$header}

<section id="profile">

<div class="header">

<div class="upper">

<div class="row">

<h1>{$formattedname}</h1>

<h2>{$displaygroup['title']}</h2>

</div>

{$sendpm}

</div>

<div class="lower">

<div class="avatar">{$avatar}</div>

<div class="info">

<div class="row">

<h3>Zawartość</h3>

{$memprofile['postnum']}

</div>

<div class="row">

<h3>Rejestracja</h3>

{$memregdate}

</div>

<div class="row">

<h3>Ostatatnia wizyta</h3>

{$memlastvisitdate}

</div>

</div>

{$findposts}

</div>

</div>

<!-- Header/Main -->

<div class="main">

    <div class="nav_profile_info_links">

        <span class="member_profile_nav_link_1">Podstawowe</span> 

        <span class="member_profile_nav_link_2">Dodatkowe</span> 

        <span class="member_profile_nav_link_3">Kontakt</span>

    </div>

<div class="row left">

    <div class="member_profile_nav_content_1 member_profile_nav_content_2">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">

<tr>

<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>

</tr>

<tr>

<td class="trow1"><strong>Tytuł:</strong></td>

<td class="trow1">{$usertitle}</td>

</tr>

<tr>

<td class="trow1"><strong>{$lang->joined}</strong></td>

<td class="trow1">{$memregdate}</td>

</tr>

{$reputation}

{$warning_level}

</table> 

</div>

<div class="member_profile_nav_content_3">

{$contact_details}

</div>

{$profilefields} 

{$modoptions}

{$adminoptions}

<script>

$(document).ready(function() {

    $(".nav_profile_info_links span").click(function() {

      var clickedElementClassName = $(this).attr("class");

      var numberOfClickedElement = clickedElementClassName.match(/\d/)

      $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);

      $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)

    })

})

</script>

</div>

<!-- Left/Right -->

<div class="row right">

{$lastpost}

</div>

</div>

</section>

{$footer}

</body>

</html>

**P3neR** · 05.11.2018, 14:30

Dziękuje dziala

**P3neR** · 05.11.2018, 15:33

@Ardex Dałoby rade aby w ogolnych informacje wysuwały sie pod ogólnymi ?

<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>

</head>

<body>

{$header}

<section id="profile">

<div class="header">

<div class="upper">

<div class="row">

<h1>{$formattedname}</h1>

<h2>{$displaygroup['title']}</h2>

</div>

{$sendpm}

</div>

<div class="lower">

<div class="avatar">{$avatar}</div>

<div class="info">

<div class="row">

<h3>Zawartość</h3>

{$memprofile['postnum']}

</div>

<div class="row">

<h3>Rejestracja</h3>

{$memregdate}

</div>

<div class="row">

<h3>Ostatatnia wizyta</h3>

{$memlastvisitdate}

</div>

</div>

{$findposts}

</div>

</div>

<!-- Header/Main -->

<div class="main">

<div class="row left">

 <div class="nav_profile_info_links">

       <a href="#stats" aria-controls="stats" role="tab" data-toggle="tab"><span class="member_profile_nav_link_1"><i class="fa fa-tasks"></i>&nbsp Ogólne</span> 

        <a href="#overview" aria-controls="overview" role="tab" data-toggle="tab"><span class="member_profile_nav_link_2"><i class="fa fa-user"></i>&nbsp Dodatkowe</span> 

        <a href="#contact" aria-controls="contact" role="tab" data-toggle="tab"><span class="member_profile_nav_link_3"><i class="fa fa-envelope"></i>&nbsp Kontakt</span>

    </div>

    <div class="member_profile_nav_content_1 member_profile_nav_content_2">

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">

<tr>

<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>

</tr>

<tr>

<td class="trow1"><strong>Tytuł:</strong></td>

<td class="trow1">{$usertitle}</td>

</tr>

<tr>

<td class="trow1"><strong>{$lang->joined}</strong></td>

<td class="trow1">{$memregdate}</td>

</tr>

{$reputation}

{$warning_level}

</table> 

</div>

<div class="member_profile_nav_content_3">

{$contact_details}

</div>

{$profilefields} 

{$modoptions}

{$adminoptions}

<script>

$(document).ready(function() {

    $(".nav_profile_info_links span").click(function() {

      var clickedElementClassName = $(this).attr("class");

      var numberOfClickedElement = clickedElementClassName.match(/\d/)

      $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);

      $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)

    })

})

</script>

</div>

<!-- Left/Right -->

<div class="row right">

{$lastpost}

</div>

</div>

</section>

{$footer}

</body>

</html>

**Ardex** · 05.11.2018, 17:59

Spróbuj tak

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
</head>
<body>
{$header}
<section id="profile">
<div class="header">
<div class="upper">
<div class="row">
<h1>{$formattedname}</h1>
<h2>{$displaygroup['title']}</h2>
</div>
{$sendpm}
</div>
<div class="lower">
<div class="avatar">{$avatar}</div>
<div class="info">
<div class="row">
<h3>Zawartość</h3>
{$memprofile['postnum']}
</div>
<div class="row">
<h3>Rejestracja</h3>
{$memregdate}
</div>
<div class="row">
<h3>Ostatatnia wizyta</h3>
{$memlastvisitdate}
</div>
</div>
{$findposts}
</div>
</div>
<!-- Header/Main -->
<div class="main">
<div class="row left">
      <a href="#stats" aria-controls="stats" role="tab" data-toggle="tab"><span class="member_profile_nav_link_1"><i class="fa fa-tasks"></i>&nbsp Ogólne</span> 
        <div class="member_profile_nav_content_1 member_profile_nav_content_2">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="pborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1"><strong>Tytuł:</strong></td>
<td class="trow1">{$usertitle}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
{$reputation}
{$warning_level}
</table> 
</div>
       <a href="#overview" aria-controls="overview" role="tab" data-toggle="tab"><span class="member_profile_nav_link_2"><i class="fa fa-user"></i>&nbsp Dodatkowe</span> 
       <a href="#contact" aria-controls="contact" role="tab" data-toggle="tab"><span class="member_profile_nav_link_3"><i class="fa fa-envelope"></i>&nbsp Kontakt</span>
        <div class="member_profile_nav_content_3">
{$contact_details}
</div>

   

{$profilefields} 
{$modoptions}
{$adminoptions}
<script>
$(document).ready(function() {
   $('[class^="member_profile_nav_link_"]').click(function() {
     var clickedElementClassName = $(this).attr("class");
     var numberOfClickedElement = clickedElementClassName.match(/\d/)
     
     $(".member_profile_active").removeClass("member_profile_active").fadeOut(500);
     
     $(".member_profile_nav_content_"+numberOfClickedElement).addClass("member_profile_active").slideDown(600)
   })
})
</script>
</div>
<!-- Left/Right -->
<div class="row right">
{$lastpost}
</div>
</div>
</section>

{$footer}
</body>
</html> 

**P3neR** · (Ten post był ostatnio modyfikowany: 05.11.2018, 19:26 przez P3neR.)

A z dodatkowymi aby w dół sie rozuswały to jak ? :C

Dobra zrobiłem sam dziękuje jeszcze raz za pomoc !!!

Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Dynamiczne ukrycie/rozwinięcie zakładki po kliknięciu

P3neR

Ardex

P3neR

Ardex

P3neR

Ardex

P3neR

P3neR

Ardex

P3neR

Użytkownicy przeglądający ten wątek:

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie