탭 전환시 <?php include_once 출력 안되는 문제 도움좀 부탁드립니다.
본문
index.php
<div class="tabs"> <div class="tab active" data-target="news">News</div> <div class="tab" data-target="commu">Commu</div> </div> <div id="news" class="tab-content active"> <div class="wordcloud"> <?php include_once(G5_THEME_PATH.'/inboard_wordcloud_news.php'); ?> </div> </div> <div id="commu" class="tab-content"> <div class="wordcloud"> <?php include_once(G5_THEME_PATH.'/inboard_wordcloud_commu.php'); ?> </div> </div>
<script> document.querySelectorAll('.tab').forEach(function(tab) { tab.addEventListener('click', function() { // 모든 탭에서 active 클래스 제거 document.querySelectorAll('.tab').forEach(function(tab) { tab.classList.remove('active'); }); // 클릭된 탭에 active 클래스 추가 this.classList.add('active'); // 모든 탭 내용을 숨김 document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); }); // 클릭된 탭의 내용을 표시 var target = this.getAttribute('data-target'); document.getElementById(target).classList.add('active'); }); }); </script>
inboard_worldcloud_news.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>
<canvas id="wordcloud" style="width: 100%; height: 200px;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 키워드와 빈도 데이터를 가져옴
fetch('https://nolazo.com/theme/BS4-Basic/inboard_hot_keyword_news.php')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// 상위 100개의 키워드와 비율만 가져오기
var words = data.words.slice(0, 100); // 단어 100개
var rates = data.rates.slice(0, 100); // 비율 100개
// 키워드와 비율을 기반으로 워드 클라우드 생성
var keywordList = words.map(function(word, index) {
var rate = rates[index] ? rates[index].match(/[\d.]+/) : [1]; // 비율이 없을 때 기본 값 1
var frequency = parseFloat(rate[0]) * 100; // 비율을 빈도로 사용
return [word, frequency]; // 모든 단어 포함
});
// 워드 클라우드 생성
WordCloud(document.getElementById('wordcloud'), {
list: keywordList,
gridSize: 5, // 더 좁은 간격
weightFactor: 0.25, // 크기를 더 크게 조정
color: 'random-dark',
rotateRatio: 0, // 모든 키워드에 대해 rotate 함수 적용
backgroundColor: '#ffffff',
click: function(item) {
// 클릭된 키워드로 Google 검색
var searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(item[0] + ' site:nolazo.com');
window.open(searchUrl, '_blank'); // 새 탭에서 검색 결과 열기
}
});
})
.catch(error => {
console.error('Fetch error:', error);
});
});
</script>
inboard_wordcloud_commu.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>
<canvas id="wordcloud" style="width: 100%; height: 200px;"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 키워드와 빈도 데이터를 가져옴
fetch('https://nolazo.com/theme/BS4-Basic/inboard_hot_keyword_commu.php')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// 상위 100개의 키워드와 비율만 가져오기
var words = data.words.slice(0, 50); // 단어 100개
var rates = data.rates.slice(0, 50); // 비율 100개
// 키워드와 비율을 기반으로 워드 클라우드 생성
var keywordList = words.map(function(word, index) {
var rate = rates[index] ? rates[index].match(/[\d.]+/) : [1]; // 비율이 없을 때 기본 값 1
var frequency = parseFloat(rate[0]) * 100; // 비율을 빈도로 사용
return [word, frequency]; // 모든 단어 포함
});
// 워드 클라우드 생성
WordCloud(document.getElementById('wordcloud'), {
list: keywordList,
gridSize: 5, // 더 좁은 간격
weightFactor: 0.3, // 크기를 더 크게 조정
color: 'random-dark',
rotateRatio: 0, // 모든 키워드에 대해 rotate 함수 적용
backgroundColor: '#ffffff',
click: function(item) {
// 클릭된 키워드로 Google 검색
var searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(item[0] + ' site:nolazo.com');
window.open(searchUrl, '_blank'); // 새 탭에서 검색 결과 열기
}
});
})
.catch(error => {
console.error('Fetch error:', error);
});
});
</script>
메인페이지에 탭기능을 넣어서 2개의 inboard_wordcloud_news.php / inboard_wordcloud_commu.php 파일을 같은 위치에서 이용하고 싶은데요.
진짜로 오늘 하루종일 이거가지고 챗지피티랑 싸웠는데요.
처음에는 아래처럼 파일하나로 끝낼려고 트라이 하다가 첫번째 탭은 제대로 보이는데 다음탭은 계속 출력이 안돼길래 그냥 포기하고 위 처럼 2개의 파일로 인클루드 할려고 했습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script> <canvas id="wordcloud" style="width: 100%; height: 200px;"></canvas> <?php // 여기서 $tab_name 변수가 어떻게 설정되었는지 확인하세요. if ($tab_name === 'news') { echo '<script> ... </script>'; // News 탭 스크립트 } else if ($tab_name === 'commu') { echo '<script> ... </script>'; // Commu 탭 스크립트 } ?>
근데 증상은 동일합니다.
<div id="news" class="tab-content active"> <div class="wordcloud">News 탭이 활성화되었습니다.</div> </div> <div id="commu" class="tab-content"> <div class="wordcloud">Commu 탭이 활성화되었습니다.</div> </div>
이렇게 하면은 출력이 되는데 인클루드를 넣으면 처음탭은 정상적으로 나오는데 다음탭이 안먹히더라고요.
거의 포기한 상태에서 그누 선생님들한테 도움 받을수 있으면 받아보려 합니다.
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<style>
.tabs { display: flex; }
.tabs .tab { flex-grow: 1; }
.tabs, .tab-content { width: 500px; background-color: floralwhite; }
.tabs .tab.active { color: lightblue; font-weight: bold; }
.tab-content { display: none; }
.tab-content.active { display: block; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>
<div class="tabs">
<div class="tab active" data-target="news">News</div>
<div class="tab" data-target="commu">Commu</div>
</div>
<div id="news" class="tab-content active">
<div class="wordcloud">
<canvas id="wordcloud-a" style="width: 100%; height: 200px;"></canvas>
1<?php //include_once(G5_THEME_PATH.'/inboard_wordcloud_news.php'); ?>
</div>
</div>
<div id="commu" class="tab-content">
<div class="wordcloud">
<canvas id="wordcloud-b" style="width: 100%; height: 200px;"></canvas>
2<?php //include_once(G5_THEME_PATH.'/inboard_wordcloud_commu.php'); ?>
</div>
</div>
<script>
document.querySelectorAll('.tab').forEach(function(tab) {
tab.addEventListener('click', function() {
// 모든 탭에서 active 클래스 제거
document.querySelectorAll('.tab').forEach(function(tab) { tab.classList.remove('active'); }); // 클릭된 탭에 active 클래스 추가
this.classList.add('active'); // 모든 탭 내용을 숨김
document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); }); // 클릭된 탭의 내용을 표시
var target = this.getAttribute('data-target');
document.getElementById(target).classList.add('active');
});
});
document.addEventListener("DOMContentLoaded", function() {
var options = {
list: null,
gridSize: 5, // 더 좁은 간격
// weightFactor: 0.25, // 크기를 더 크게 조정
weightFactor: 4, // 크기를 더 크게 조정
color: 'random-dark',
rotateRatio: 0, // 모든 키워드에 대해 rotate 함수 적용
backgroundColor: '#ffffff',
click: function(item) {
// 클릭된 키워드로 Google 검색
var searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(item[0] + ' site:nolazo.com');
window.open(searchUrl, '_blank'); // 새 탭에서 검색 결과 열기
}
};
var keywordListA = [
["a-1", 2],
["a-2", 5],
["a-3", 10],
["a-4", 15],
["a-5", 20],
];
// 워드 클라우드 생성
options.list = keywordListA;
WordCloud(document.getElementById('wordcloud-a'), options);
var keywordListB = [
["b-1", 20],
["b-2", 15],
["b-3", 10],
["b-4", 5],
["b-5", 2],
];
// 워드 클라우드 생성
options.list = keywordListB;
WordCloud(document.getElementById('wordcloud-b'), options);
});
</script>
안녕하세요.
기존 인클루드는 //로 표시하는 대신에 canvas id 를 wordcloud-a, wordcloud-b 로 지정하고
아래의 임의로 지정하신 a-, b- 를 인클루드 할 주소로 챗지피티 힘을 빌려서 해봤는데 출력이 안되네요. 하하하. 어렵습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.0/wordcloud2.min.js"></script>
<div class="tabs">
<div class="tab active" data-target="news">News</div>
<div class="tab" data-target="commu">Commu</div>
</div>
<div id="news" class="tab-content active">
<div class="wordcloud">
<canvas id="wordcloud-a" style="width: 100%; height: 200px;"></canvas>
</div>
</div>
<div id="commu" class="tab-content">
<div class="wordcloud">
<canvas id="wordcloud-b" style="width: 100%; height: 200px;"></canvas>
</div>
</div>
<script>
document.querySelectorAll('.tab').forEach(function(tab) {
tab.addEventListener('click', function() {
// 모든 탭에서 active 클래스 제거
document.querySelectorAll('.tab').forEach(function(tab) { tab.classList.remove('active'); });
// 클릭된 탭에 active 클래스 추가
this.classList.add('active');
// 모든 탭 내용을 숨김
document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); });
// 클릭된 탭의 내용을 표시
var target = this.getAttribute('data-target');
document.getElementById(target).classList.add('active');
// 탭에 따라 워드 클라우드 로드
loadWordCloud(target);
});
});
document.addEventListener("DOMContentLoaded", function() {
loadWordCloud('news'); // 페이지 로드 시 'news' 탭을 기본으로 로드
});
function loadWordCloud(target) {
var options = {
list: null,
gridSize: 5, // 더 좁은 간격
weightFactor: 4, // 크기를 더 크게 조정
color: 'random-dark',
rotateRatio: 0, // 모든 키워드에 대해 rotate 함수 적용
backgroundColor: '#ffffff',
click: function(item) {
// 클릭된 키워드로 Google 검색
var searchUrl = "https://www.google.com/search?q=" + encodeURIComponent(item[0] + ' site:nolazo.com');
window.open(searchUrl, '_blank'); // 새 탭에서 검색 결과 열기
}
};
// 해당 탭에 맞는 PHP 파일에서 데이터를 가져오기
var url;
if (target === 'news') {
url = G5_THEME_PATH + '/inboard_wordcloud_news.php'; // news 탭 데이터
} else if (target === 'commu') {
url = G5_THEME_PATH + '/inboard_wordcloud_commu.php'; // commu 탭 데이터
}
fetch(url)
.then(response => response.json())
.then(data => {
options.list = data;
if (target === 'news') {
WordCloud(document.getElementById('wordcloud-a'), options);
} else if (target === 'commu') {
WordCloud(document.getElementById('wordcloud-b'), options);
}
})
.catch(error => console.error('Error fetching data:', error));
}
</script>
답변을 작성하시기 전에 로그인 해주세요.
