Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,025

HOME > PHP > PHP Forum > เปลี่ยนTheme หน้าเว็บ โดยใช้ select menu ติดปัญหา เปลี่ยนกลับไม่ได้



 

เปลี่ยนTheme หน้าเว็บ โดยใช้ select menu ติดปัญหา เปลี่ยนกลับไม่ได้

 



Topic : 133395



โพสกระทู้ ( 24 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



111
222
Code
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> div{text-align: right;margin-top: 20px } .defaultTitle{margin-left: 30px;font-size: 20px;font-weight: bold} .defaultMessage{margin-left: 30px;font-size: 10px; width: 1000px;} .backgroundTheme1{background-color: lightcoral} .backgroundTheme2{background-color:lightseagreen} .backgroundTheme3{background-color:limegreen} .titleTheme1{font-size: 40px;color: purple} .titleTheme2{font-size: 60px;color:red} .titleTheme3{font-size: 80px;color:blue} .messageTheme1{font-size: 20px;color: purple} .messageTheme2{font-size: 30px;color:red} .messageTheme3{font-size: 40px;color:blue} </style> </head> <body> <div class=' container-fluid'> <label for="theme">Select theme</label>&nbsp; <select id="theme"> <option value='theme1'>Theme 1</option> <option value='theme2'>Theme 2</option> <option value='theme3'>Theme 3</option> </select> </div> <p class="defaultTitle" id='title'>Cristiano Ronaldo</p> <p class='defaultMessage' id='message'>Cristiano Ronaldo dos Santos Aveiro GOIH ComM (European Portuguese: [kɾiʃˈtjɐnu ʁoˈnaɫdu]; born 5 February 1985) is a Portuguese professional footballer who plays as a forward for Italian club Juventus and captains the Portugal national team. Often considered the best player in the world and regarded by many as one of the greatest players of all time,[4][5][6] Ronaldo has a record-tying five Ballon d'Or awards,[note 2] the most for a European player, and is the first player to win four European Golden Shoes. He has won 27 trophies in his career, including five league titles, five UEFA Champions League titles and one UEFA European Championship. A prolific goalscorer, Ronaldo holds the records for most official goals scored in Europe's top-five leagues (414), the UEFA Champions League (124), the UEFA European Championship (9), as well as those for most assists in the UEFA Champions League (34) and the UEFA European Championship (6). He has scored 700 senior career goals for club and country.</p> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script> $('#theme').bind('change keyup',function(){ let theme = $('#theme').val(); if(theme==='theme1') { $('body').addClass('backgroundTheme1') $('#title').addClass('titleTheme1') $('#message').addClass('messageTheme1') } else if(theme==='theme2') { $('body').addClass('backgroundTheme2') $('#title').addClass('titleTheme2') $('#message').addClass('messageTheme2') } else if(theme==='theme3') { $('body').addClass('backgroundTheme3') $('#title').addClass('titleTheme3') $('#message').addClass('messageTheme3') } }) </script> </body> </html>


ปัญหาที่เจอ
1.พอเลือกที่Theme3 จะไม่สามารถเปลี่ยนThemeได้อีก
2.Theme1 เลือกไม่ได้เลย

สิ่งทีต้องการ
1.ให้หน้าเว็บเลือกค่าเริ่มต้นเป็นTheme1 หรือThemeที่เลือกอยู่
2.สามารถเปลี่ยนThemeไปมาได้
ต้องเขียนjQuery เพิ่มตรงไหนบ้างรบกวนพี่ๆด้วยครับ



Tag : PHP, HTML, CSS, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-04-01 02:38:02 By : nobparad View : 766 Reply : 3
 

 

No. 1



โพสกระทู้ ( 5,146 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


แก้ไขส่วนนี้ครับ
$('#theme').bind('change keyup',function(e){
    e.preventDefault();
    $('body').removeClass();
    $('#title').removeClass();
    $('#message').removeClass();
    
    let theme = $('#theme option:selected').val();



ส่วนการจะให้เป็น template default เป็นอะไรก็กำหนดที่ html เอาได้เลยครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-04-01 06:41:01 By : deawx
 


 

No. 2



โพสกระทู้ ( 4,692 )
บทความ ( 8 )



สถานะออฟไลน์


อีกแนวคือ ใน select box เพิ่ม option ว่างเปล่าอีกอัน
<option value="">โปรดเลือก Theme</option>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-04-01 09:02:03 By : mr.v
 

 

No. 3



โพสกระทู้ ( 24 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : deawx เมื่อวันที่ 2019-04-01 06:41:01
รายละเอียดของการตอบ ::
ใส่ removeClass() ได้ผลเลย ขอบคุณครับได้แล้ว



ประวัติการแก้ไข
2019-04-01 09:14:27
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-04-01 09:13:46 By : nobparad
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : เปลี่ยนTheme หน้าเว็บ โดยใช้ select menu ติดปัญหา เปลี่ยนกลับไม่ได้
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่