제목 | simple tab | ||
---|---|---|---|
글쓴이 | darkninja | 작성시각 | 2023/01/01 23:27:46 |
|
|||
html tag 와 js 처리부분이 연결되어 있으니 한곳만 수정하면 작동이 안됩니다. js 부분은 간단히 몇줄로 압축이 가능하지만 이것을 풀어서 코딩하고 동작시키는데 며칠이 걸렸습니다;
css <style> .tabs_wrapper { -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #fafafa; margin: 1px 1px 3px 1px; padding: 1px 1px 1px 1px; } .tabs_contents_container { border: 1px solid #ccc; border-top: none; padding: 3px; } .tab_contents { display: none; } .tabs_container { border-bottom: 1px solid #ccc; } .tabs_pull_right { float: right !important; right: 0; left: auto; margin-right: 0; position: relative; display: inline-block; vertical-align: middle; } .tabs { list-style: none; padding: 5px 0 4px 0; margin: 0 0 0 10px; font: 0.75em arial; } .tabs div span { display: inline; background-color: #eeeeee; } .tabs li { display: inline; } .tabs li a { border: 1px solid #ccc; padding: 4px 6px; text-decoration: none; background-color: #eeeeee; border-bottom: none; outline: none; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; } .tabs li a:hover { background-color: #dddddd; } .tabs li.active a { border-bottom: 1px solid #fff; background-color: #fff; padding: 4px 6px 5px 6px; } .tabs li.active a:hover { } .tabs li a.icon_accept { background-image: url('accept.png'); background-position: 5px; background-repeat: no-repeat; padding-left: 24px; } .tabs li a.icon_accept:hover { padding-left: 24px; } .clearfix:before { display: table; content: " "; } .clearfix:after { display: table; content: " "; /* Older browser do not support empty content */ clear: both; visibility: hidden; display: block; height: 0; } </style> php /* 사용자 정의 */ // http://127.0.0.1/ci-426/public define('SCRIPT_NAME', $_SERVER['SCRIPT_NAME']); define('HTTP_HTTPS', ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']=='on') ? 's' : '')); define('HTTP_HOST', 'http'.HTTP_HTTPS.'://'.$_SERVER['HTTP_HOST']); define('DOCUMENT_ROOT', $_SERVER['DOCUMENT_ROOT']); $root_path = str_replace(basename(SCRIPT_NAME), '', SCRIPT_NAME); $root_path = substr($root_path, 0, -1); if (empty($root_path)) { $root_path = ''; } $base_path = str_replace('/public' , '', $root_path); define('BASE_PATH', $base_path); define('ROOT_PATH', $root_path); define('HTTP_BASE', HTTP_HOST.BASE_PATH); define('DOC_BASE', DOCUMENT_ROOT.BASE_PATH); define('HTTP_ROOT', HTTP_HOST.ROOT_PATH); define('DOC_ROOT', DOCUMENT_ROOT.ROOT_PATH); $request = \Config\Services::request(); $uri = $request->uri; $TotalSegments = $uri->getTotalSegments(); $seg_controller = $uri->getTotalSegments()>=1 ? $uri->getSegment(1) : '/'; $seg_func = $uri->getTotalSegments()>=2 ? $uri->getSegment(2) : ''; $seg_table = $uri->getTotalSegments()>=3 ? $uri->getSegment(3) : ''; $seg_index = $uri->getTotalSegments()>=4 ? $uri->getSegment(4) : ''; <div class="tabs_wrapper"> <div class="tabs_container"> <ul id="tabs_info" class="tabs"> <div class="tabs_pull_right"> <span id="tab_prev"><a href="#">prev</a></span> <span id="tab_next"><a href="#">next</a></span> </div> <li><a href="#tab_seg" class="ahref">segments</a></li> <li><a href="#tab_path" class="ahref">path</a></li> <li class="active"><a href="#tab_doc" class="ahref">doc</a></li> <div class="clearfix"></div> </ul> </div> <div id="tabs_info_contents" class="tabs_contents_container"> <div id="tab_seg" class="tab_contents"> <?php echo 'TotalSegments : '.$TotalSegments.'<br>'; echo 'seg_controller : '.$seg_controller.'<br>'; echo 'seg_func : '.$seg_func.'<br>'; echo 'seg_table : '.$seg_table.'<br>'; ?> </div> <div id="tab_path" class="tab_contents"> <?php echo "HTTP_HOST => ".HTTP_HOST."<br>"; echo "DOCUMENT_ROOT => ".DOCUMENT_ROOT."<br>"; echo "<br>"; echo "BASE_PATH => ".BASE_PATH."<br>"; echo "ROOT_PATH => ".ROOT_PATH."<br>"; echo "<br>"; echo "HTTP_BASE => ".HTTP_BASE."<br>"; echo "DOC_BASE => ".DOC_BASE."<br>"; echo "<br>"; echo "HTTP_ROOT => ".HTTP_ROOT."<br>"; echo "DOC_ROOT => ".DOC_ROOT."<br>"; echo "<br>"; echo "base_url() => ".base_url()."<br>"; ?> </div> <div id="tab_doc" class="tab_contents"> <a target="_blank" href="http://www.phpschool.com/">phpschool</a> <a target="_blank" href="http://www.tcpschool.com/">tcpschool</a> <a target="_blank" href="https://link2me.tistory.com/category">link2me</a> <br/><br/> <a target="_blank" href="https://www.php.net/manual/en/index.php">php</a> <a target="_blank" href="https://ko.javascript.info/">JavaScript</a> <a target="_blank" href="https://www.devkuma.com/">devkuma</a> </div> </div> </div> js <script type="text/javascript" charset="utf-8"> function has_class(items, className) { //alert(JSON.stringify(items)); for(var i = 0; i < items.length; i++) { var classlist = items[i].classList; for(var j = 0; j < classlist.length; j++) { if (classlist[j] == className) { return items[i]; } } } return false; } function item_prev(items, className) { var item = has_class(items, className); for(var i = 0; i < items.length; i++) { if (items[i] == item) { if (i > 0) { return items[i-1]; } } } return false; } function item_next(items, className) { var item = has_class(items, className); for(var i = 0; i < items.length; i++) { if (items[i] == item) { if (i < items.length-1) { return items[i+1]; } } } return false; } var tabs_info = document.getElementById("tabs_info"); var tabList = tabs_info.getElementsByTagName("li") var tabs_info_contents = document.getElementById("tabs_info_contents"); var contentList = tabs_info_contents.querySelectorAll('.tab_contents'); var tabs_active = "active"; document.getElementById("tab_prev").onclick = function(event) { event.preventDefault(); var item = item_prev(tabList, tabs_active); if (item) { item.querySelector('.ahref').click(); } return false; }; document.getElementById("tab_next").onclick = function(event) { event.preventDefault(); var item = item_next(tabList, tabs_active); if (item) { item.querySelector('.ahref').click(); } return false; }; for(var i = 0; i < tabList.length; i++) { tabList[i].querySelector('.ahref').addEventListener('click', function(event) { event.preventDefault(); for(var j = 0; j < tabList.length; j++) { tabList[j].classList.remove(tabs_active); contentList[j].style.display = 'none'; } this.parentNode.classList.add(tabs_active); var selected_tab = this.getAttribute('href'); document.querySelector(selected_tab).style.display = 'block'; return false; } ); } var item = has_class(tabList, tabs_active); if (item) { item.querySelector('.ahref').click(); } </script>
|
|||
다음글 | 고영창님의 만세력 | ||
이전글 | captcha font size 폰트 사이즈가 바뀌지 ... | ||
없음 |