【CSS】input連結目標設定

連結 input

終葉 2018-08-08 15:02:28 ‧ 2209 瀏覽

請問如何讓這個input的連結目標指向下方的iframe中

<style type="text/css">
.listMenu { list-style: none; padding: 0; color:red; display: flex; flex-wrap: nowrap; }
.listMenu>li { flex-grow:1; text-align:center; }
.listMenu>li input[type="radio"]{ /*display:none;*/ }
.listMenu>li input[type="radio"]:checked~label{ color:Black; cursor: default; }
.listMenu>li label{ cursor: pointer; }
.listMenu>li label:hover{ color:blue; }
</style>

<ul class="listMenu">
      <li>
        <input type="radio" name="tab" id="tab5" onclick="location.href='http://tw.yahoo.com'"/>
        <label for="tab5">Yahoo</label>
      </li>
</ul>

<iframe src="www.google.com" name="mainframe" width="100%" height="1500" scrolling="No" frameborder="0" id="mainframe"></iframe>

用了< base >還是覆蓋整頁
麻煩各位了~~~~謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-08-08 15:20:29

最佳解答

安奈…

<html>
<head>
    <title>Iframe Link</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- CSS -->
    <style type="text/css">
        .listMenu { list-style: none; padding: 0; color:red; display: flex; flex-wrap: nowrap; }
        .listMenu>li { flex-grow:1; text-align:center; }
        .listMenu>li input[type="radio"]{ /*display:none;*/ }
        .listMenu>li input[type="radio"]:checked~label{ color:Black; cursor: default; }
        .listMenu>li label{ cursor: pointer; }
        .listMenu>li label:hover{ color:blue; }
    </style>

    <!-- Javascript -->
    <script language="javascript">
        $( document ).ready(function() {
            $('#tab5').on( "click", function() {
                $('#mainframe').attr('src','http://api.jquery.com/on/');
            });
        });
    </script>
</head>
<body>

<ul class="listMenu">
    <li>
        <input type="radio" name="tab" id="tab5"/>
        <label for="tab5">Yahoo</label>
    </li>
</ul>

<iframe src="https://www.google.com" name="mainframe" width="100%" height="1500" scrolling="No" frameborder="0" id="mainframe"></iframe>
</body>
</html>

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

終葉 iT邦新手 5 級 ‧ 2018-08-08 15:32:24 檢舉

謝謝回答QQ
請問如果是想要把target下在

<input type="radio" name="tab" id="tab5" onclick="location.href='http://tw.yahoo.com'"/>

內的話呢

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-08 15:33:10 檢舉

改了～

終葉 iT邦新手 5 級 ‧ 2018-08-08 15:42:36 檢舉

謝謝><

小魚 iT邦大師 1 級 ‧ 2018-08-08 20:05:45 檢舉

話說, 那個 label for還不大知道做什麼的，
感覺沒什麼差別...

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-08 20:40:21 檢舉

有label for, 只要選擇label的文字，就可以選到radio的選項，簡單說就是為了方便使用者選擇
http://www.w3school.com.cn/tags/att_label_for.asp

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙