پارسا سجادی
2 سال پیش توسط پارسا سجادی مطرح شد
2 پاسخ

در js کمک میخوام

سلام
میخوام بدونم چطوری با کلیک روی هر دکمه کانتنت مورد نظر با js نمایش داده بشه
حالا اگر با jquery هم گفتین خوبه
 تصویر

کد این بخش هم


    <div class="panel">

        <div class="panel-menu-content col-xl-8 col-lg-8 col-md-7 col-sm-12 col-12">

            <p>نمونه </p>

        </div>

        <div class="panel-menu col-xl-4 col-lg-4 col-md-5 col-sm-12 col-12">

            <img style="width:80px;height:80px" class="profile" src="<?= $siteaddress ?>/Upload/profile.jpg" alt="profile">
            <h2 class="h5">نام و نام خانوادگی</h2>
            <ul>
                <li class="active"><a href="#">نظرات من</a></li>
                <li><a href="#">پرسش های من</a></li>
                <li><a href="#">تغییر پروفایل</a></li>
                <li><a href="#">تغییر رمز عبور</a></li>
                <li><a href="#">تغییر نام و نام خانوادگی</a></li>
            </ul>

            <hr> 
            <h3 class="h5">مدیریت</h3>
            <hr>

            <ul>
                <li><a href="#">مدیریت اسلایدر</a></li>
                <li><a href="#">ثبت مقاله</a></li>
                <li><a href="#">کاربران</a></li>
            </ul>
        </div>

    </div>

داخل panel-menu-content میخوام مطالب مورد نظرم رو نمایش بدم
درواقع داخل panel-menu-content مطالب از قبل قرار گرفته و با display اون ها نمایش داده نمیشن
میخوام وقتی روی li کلیک شد همون li کلاس active بگیره و مطلب مورد نظر display : flex بشه و نمایش داده بشه


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 2 سال پیش مطرح شد
0

درود خوبی...
پیوند زیر:
https://codepen.io/Cosmo96/pen/VwKWdJW


نجما
@n.bahreman157 2 سال پیش آپدیت شد
0

سلام وقتتون بخیر
برای این کار میتونین از بوت استرپ کمک بگیرین .تو لینک زیر دنبال vertical pills رو جستجو کنید دقیقا همون چیزی که شما میخواین
https://getbootstrap.com/docs/4.0/components/navs/

اگر هم نمیخواستین از بوت استرپ استفاده کنید این لینک میتونه کمکتون کنه
https://codepen.io/cssjockey/pen/njywEE

این هم یک نمونه جاوا اسکریپتی
https://codepen.io/Ghandour/pen/WErRyq


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام